CSS липкий промежуток нижнего колонтитула между элементами кузова

Я использую box-sizing: border-box; для всех элементов, и я хочу сделать липкий нижний колонтитул, я пробовал много разных методов, но он не работает. Даже если я использую position: relative; для нижнего колонтитула, тогда, когда я использую примерно zoom: 33%, есть промежуток между нижним и нижним колонтитулом. Или когда он нижний колонтитул position: absolute;<section> идет под нижний колонтитул, или при малом увеличении есть промежуток между нижним колонтитулом и <section>. Пожалуйста, помогите мне.CSS липкий промежуток нижнего колонтитула между элементами кузова

* { 
 
\t margin: 0px; 
 
\t padding: 0px; 
 
} 
 

 
html { 
 
\t box-sizing: border-box; 
 
} 
 

 
*, *:before, *:after { 
 
\t box-sizing: inherit; 
 
} 
 

 
html { 
 
\t height: 100%; 
 
\t 
 
\t background-color: purple; 
 
\t border: 4px dotted purple; 
 
} 
 

 
body { 
 
\t position: relative; 
 
\t min-height: 100%; 
 
\t 
 
\t background-color: blue; 
 
\t border: 4px dotted lightblue; 
 

 
\t text-align:center; 
 
\t color: white; 
 
} 
 

 
nav { 
 
\t background-color: black; 
 
\t position: fixed; 
 
\t top: 0; 
 
\t left: 0; 
 
\t width: 100%; 
 
\t height: 70px; 
 
} 
 

 
header, #page_1 { 
 
\t height: 800px; 
 
\t line-height: 800px; 
 
} 
 

 
header { 
 
\t background-color: green; 
 
} 
 

 
#page_1 { 
 
\t background-color: red; 
 
\t border: 4px solid yellow; 
 
} 
 

 
footer { 
 
\t position: absolute; 
 
\t left: 0; 
 
\t bottom: 0; 
 
\t width: 100%; 
 
\t height: 100px; 
 
\t background-color: black; 
 
\t color: white; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>...</title> 
 
    <meta charset="UTF-8" /> 
 
</head> 
 
<body> 
 
\t <nav>Navigation</nav> 
 

 
\t <header>Header</header> 
 
\t \t \t 
 
\t <section id="page_1">Section</section> 
 
\t 
 
\t <footer>FOOTER</footer> 
 
</body> 
 
</html>

источник

2016-02-24 Linciokas

Это 'коробчатого sizing' и не' бокс-size'. Я изменяю его в теме и содержании, чтобы избежать путаницы с пользователями (может быть, кто-то думает, что это ударный спорт ...) –

Вы уже пытались использовать http://ryanfait.com/sticky-footer/ метод?

Вы должны разместить все содержимое, кроме нижнего колонтитула, внутри div с классом типа «обертка». Ваш навигатор находится в фиксированном положении, поэтому вы также можете держать его снаружи от обертки. Внутри обертки, на последнем месте вы поставите DIV с классом «толчок»

затем использовать этот CSS

* { 
margin: 0; 
} 
html, body { 
    height: 100%; 
} 
.wrapper { 
    min-height: 100%; 
    height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */ 
    height: 100%; 
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */ 
} 
.footer, .push { 
    height: 155px; /* .push must be the same height as .footer */ 
}

источник

2016-02-24 23:24:25

CSS липкий промежуток нижнего колонтитула между элементами кузова

ответ

Смежные вопросы