height (min-height) 100% не работает при переполнении содержимого?

Question

Я строю сайт раскладки 3 колонн. Наверху будет установлен header, а слева - nav. Затем обертка будет содержать main и aside. То, что я хочу - главное и в стороне, может заполнить высоту обертки.

И вот мой css. Вы также можете видеть, что мой jsFiddle http://jsfiddle.net/scarletsky/h8r2z/3/

* { 
    margin: 0; 
    padding: 0;  
} 

html, body { 
    width: 100%; 
    height: 100%; 
} 

.header { 
    width: 100%; 
    height: 100px; 
    position: fixed; 
    top: 0; 
    z-index: 9; 
    background: red; 
} 

.nav { 
    width: 20%; 
    height: 100%; 
    position: fixed; 
    top: 100px; 
    left: 0; 
    background: green; 
} 

.wrapper { 
    width: 80%; 
    min-height: 100%; 
    margin-top: 100px; 
    margin-left: 20%; 
    position: relative; 
} 

.main { 
    width: 70%; 
    min-height: 100%; 
    position: absolute; 
    left: 0; 
    background: black; 
} 

.aside { 
    width: 30%; 
    min-height: 100%; 
    position: absolute; 
    right: 0; 
    background: blue; 
} 

.u-color-white { 
    color: white; 
} 

кажется, что они могут хорошо работать. Но когда высота контента в main или aside больше, чем их собственный рост, это не сработает. Я не знаю, как это исправить.

Может ли кто-нибудь мне помочь? Thx!

Answer 1

у вас есть очень строгий макет. все исправлено .. Что делать, если вам нужно изменить заголовок с высоты 100 пикселей на 120? вам придется изменить его в разных местах.

Это чистое решение CSS для вашего макета, без фиксации высоты или ширины. (вы можете установить высоту или ширину, если хотите) Этот макет полностью отзывчивый и кросс-браузер.

Если вы не фиксируете высоту/ширину элементов, они будут охватывать именно то, что им нужно.

Вот Working Fiddle

HTML:

<header class="Header"></header> 
<div class="HeightTaker"> 
    <div class="Wrapper"> 
     <nav class="Nav"></nav> 
     <div class="ContentArea"> 
      <div class="Table"> 
       <div class="Main"></div> 
       <div class="Aside"></div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS:

* { 
    margin: 0; 
    padding: 0; 
} 
html, body { 
    width: 100%; 
    height: 100%; 
} 
body:before { 
    content:''; 
    height: 100%; 
    float: left; 
} 
.Header { 
    height: 100px; 
    /*No need to fix it*/ 
    background-color: red; 
} 
.HeightTaker { 
    position: relative; 
} 
.HeightTaker:after { 
    content:''; 
    display: block; 
    clear: both; 
} 
.Wrapper { 
    position: absolute; 
    width: 100%; 
    height:100%; 
} 
.Nav { 
    height: 100%; 
    float: left; 
    background-color: green; 
} 
.ContentArea { 
    overflow: auto; 
    height: 100%; 
} 
.Table { 
    display: table; 
    width: 100%; 
    height: 100%; 
} 
.Main { 
    width: 70%; 
    /*No need to fix it*/ 
    background-color: black; 
    display: table-cell; 
} 
.Aside { 
    width: 30%; 
    /*No need to fix it*/ 
    background-color: black; 
    display: table-cell; 
    background-color: blue; 
} 
.u-color-white { 
    color: white; 
} 

Answer 2

Это довольно распространенная проблема. Я бы рекомендовал либо иметь фоновое изображение для обертки, которое заставляет его выглядеть как в стороне, имеет минимальную высоту 100% или используя метод на этом сайте: http://css-tricks.com/fluid-width-equal-height-columns/

Answer 3

просто посмотрите эту скрипку .... надеюсь, что это что вы хотите ...

.aside { 
width: 30%; 
min-height: 100%; 
position:fixed; 
right: 0; 
background: blue; 

}

http://jsfiddle.net/h8r2z/6/