CSS - сделайте нижний колонтитул высоты FLUID в нижней части страницы

Если на странице не хватает контента, например 300 пикселей, нижний колонтитул появится в середине страницы с разрешением 1024 пикселя.CSS - сделайте нижний колонтитул высоты FLUID в нижней части страницы

Как я могу сделать вывод нижнего колонтитула внизу страницы, не зная высоты нижнего колонтитула?

Я попытался this решение:

/* css */ 
html, body { 
    height: 100%; 
} 

#container { 
    min-height: 100%; 
    position: relative; 
} 

#footer { 
    position: absolute; 
    bottom: 0; 
} 


<!-- html --> 
<html> 
<head></head> 

<body> 
    <div id="container"> 
    <div id="footer"></div> 
    </div> 
</body> 
</html>

, но проблема в том, что мне нужно, чтобы добавить padding-bottom: (footerheight); в элементе перед #footer. Это невозможно, потому что высота нижнего колонтитула варьируется в зависимости от страницы ...

источник

2011-01-21 Alex

не обязательно является наиболее эффективным методом, но вы могли бы просто иметь встроенный CSS на каждой странице, которые регулируют эти конкретные элементы. – DaiYoukai

У вас есть возможность использовать Javascript/jQuery? Кажется сложным или невозможным выполнить только с CSS, если вы не будете следовать совету Archonix. – mVChr

jquery делает страницу «мерцает» до тех пор, пока нижний колонтитул не будет зафиксирован. если есть javascript-решение, которое не производит этого мерцания, да, я бы с удовольствием его использовал :) – Alex

Почему бы вам просто не использовать минимальную высоту в области содержимого, поэтому, если вы установили минимальную высоту в 600 пикселей, если только 300 пикселей содержимое будет заполнять нижний колонтитул еще на 300 пикселей, поэтому он не находится посередине экрана.

источник

2011-01-24 14:29:34 geoffs3310

Откуда вы знаете, что 600 пикселей не находится посередине экрана? Что делать, если у меня есть экран с разрешением 1200 пикселей? – himself

Вы не можете избежать этого, но есть трюк: сделайте фоновый рисунок тела тем же, что и нижний колонтитул, а затем установите все остальное содержимое внутри контейнера сверху тела.

Это сделает нижний колонтитул 75px. Обратите внимание на соответствующий маркер -75px контейнера div.

html { 
    height:100%; 
    padding:0px; 
    margin:0px; 
} 
body { 
    height:95%; 
    padding:0px; 
    margin:0px; 
    background-color:#1C303C; 
} 

footer { 
    background-color:#1C303C; 
    color:#FFFFA3; 
    display:block; 
    position:absolute; 
    width:100%; 
    min-height:75px; 
    height:75px; 
    margin:0px; 
    padding:0px; 
    left:0px; 

} 

#container { 
    background-color:#FFFFFF; 
    min-height:100%; 
    height:100%; 
    width:100%; 
    top:0; 
    left:0; 
    margin: 0; 
    padding:0; 
    margin-bottom:-75px; 
}

с соответствующим HTML следующим образом:

<body> 
    <div id="container"> 
    </div> 
    <footer> 
    </footer> 
</body>

источник

2013-12-28 05:24:55 serakfalcon

CSS - сделайте нижний колонтитул высоты FLUID в нижней части страницы

ответ

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