CSS Layout, который использует высоту 100%

Question

Ребята, у меня есть макет CSS, который я использую, который имеет верхний колонтитул, нижний колонтитул и боковую панель слева. Он отлично работает, но единственная проблема заключается в том, что я бы хотел, чтобы боковая панель и нижний колонтитул расширялись до нижней части экрана, если для заполнения основного содержимого недостаточно содержимого. Как это сделать в CSS? Я отправил CSS здесь, так что вы можете увидеть, что я работаю с:

<style type="text/css"> 
    body 
    { 
     font: 100% Verdana, Arial, Helvetica, sans-serif; 
     background: #666666; 
     margin: 0; 
     padding: 0; 
     text-align: center; 
     color: #000000; 
    } 
    .twoColHybLtHdr #container 
    { 
     width: 80%; 
     background: #FFFFFF; 
     margin: 0 auto; 
     border: 1px solid #000000; 
     text-align: left; 
    } 
    .twoColHybLtHdr #header 
    { 
     background: #DDDDDD; 
     padding: 0 10px; 
    } 
    .twoColHybLtHdr #header h1 
    { 
     margin: 0; 
     padding: 10px 0; 
    } 
    .twoColHybLtHdr #sidebar1 
    { 
     float: left; 
     width: 8em; 
     background: #EBEBEB; 
     padding: 15px 0; 
    } 
    .twoColHybLtHdr #sidebar1 h3, .twoColHybLtHdr #sidebar1 p 
    { 
     margin-left: 10px; 
     margin-right: 10px; 
    } 
    .twoColHybLtHdr #mainContent 
    { 
     margin: 0 20px 0 9em; 
    } 
    .twoColHybLtHdr #footer 
    { 
     padding: 0 10px; 
     background: #DDDDDD; 
    } 
    .twoColHybLtHdr #footer p 
    { 
     margin: 0; 
     padding: 10px 0; 
    } 
    .fltrt 
    { 
     float: right; 
     margin-left: 8px; 
    } 
    .fltlft 
    { 
     float: left; 
     margin-right: 8px; 
    } 
    .clearfloat 
    { 
     clear: both; 
     height: 0; 
     font-size: 1px; 
     line-height: 0px; 
    } 
</style> 

И пример того, как использовать его:

<div id="container"> 
    <div id="header" style="text-align: center"> Header goes here </div> 
    <div id="sidebar1">Sidebar is here</div> 
    <div id="mainContent">Main Content here</div> 
    <br class="clearfloat" /> 
    <div id="footer">Footer Here</div> 
</div> 

Answer 1

Checkout липкие колонтитулы

http://ryanfait.com/sticky-footer/ http://www.cssstickyfooter.com/

<div id="wrap"> 

    <div id="main" class="clearfix"> 

    </div> 

</div> 

<div id="footer"> 

</div> 

и

* {margin:0;padding:0;} 



html, body, #wrap {height: 100%;} 

body > #wrap {height: auto; min-height: 100%;} 

#main {padding-bottom: 150px;} /* must be same height as the footer */ 

#footer {position: relative; 
    margin-top: -150px; /* negative value of footer height */ 
    height: 150px; 
    clear:both;} 

/* CLEAR FIX*/ 
.clearfix:after {content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;} 
.clearfix {display: inline-block;} 
/* Hides from IE-mac \*/ 
* html .clearfix { height: 1%;} 
.clearfix {display: block;} 
/* End hide from IE-mac */ 

Вид дубликата CSS: fixed to bottom and centered

Answer 2

Вы должны смотреть на min-height CSS property, однако будьте осторожны потому что это правильно не поддерживается во всех браузерах (в частности IE .. - как будто это было для кого)

Вы также можете захотеть проверить CSS min-height hacks on Google

Answer 3

Tak e a посмотрите на http://ryanfait.com/sticky-footer/ , вам нужно будет немного изменить свой код, поскольку все содержимое, кроме нижнего колонтитула, должно быть в div-обертки. Джош

Answer 4

Это ча n сделать с использованием display:table со 100% высотой, но тогда, естественно, IE тоже не поддерживает это. Я часто делаю таблицы с использованием divs с таблицей имен классов, tr и td, а затем заставляю IE заменять эти классы эквивалентным тегом. Таким образом, я обойду всю таблицу в качестве обсуждения макетов. Если вы не заботитесь о семантике, вы всегда можете игнорировать пуристов и делать подобные вещи с помощью реальных таблиц. Одно дело быть пуристом CSS, но это дорогая религия, когда самый высокий браузер на рынке - это устаревший продукт с технологией 90-х годов.