min-height 100% stretch

Question

У меня проблема с моими свойствами высотой и высотой.

http://nickhellemans.be/nick/testing/

Синий столбец не будет до конца страницы, когда содержание больше, чем 100%. (Полный экран)

HTML

<div id="wrapper"> 
     <section id="sidebar"> 
     test 
     </section> 
     <section class="contentViewer"> 
      content goes here 
     </section> 

    </div> 

CSS

body, html { 
height:100%; 
} 

#wrapper { 
width:100%; 
height:100%; 
} 

section#sidebar { 
float:left; 
width:300px; 
min-height:100%; 
height: auto !important; 
margin: auto; 
background-color: blue; 
overflow: hidden; 
} 

section.contentViewer { 
height:auto; 
position:absolute; 
top:0; 
right:0; 
left:300px; 
font-family: "brandon"; 
font-size:18pt; 
} 

Я уже пытался Google, но я не смог найти ответ, который подходит проблему , Кто-то знаком с этой проблемой и знает правильное решение?

Заранее спасибо

Ник

Answer 1

EDIT (опять ха-ха)

Вы должны избегать поплавка и абсолютного позиционирования, так как родители не масштабируются вместе с абсолютными позиционированными детьми-элементами. Поскольку они не масштабируются, они будут по умолчанию 100%. Я рекомендую использовать структуру таблицы (левый столбец, правая колонка, вертикальный выравнивание верхнего ширина: 100% и т.д.)

body, html, #wrapper { height: 100%; } /* defaults to 100% height */ 
#wrapper { display: table; } 
#wrapper > * { display: table-cell; vertical-align: top; height: 100%; } /* Behave as tablecells */ 
#sidebar { background-color: blue; min-width: 200px; } /* min-width is important since other cell is 100% */ 
.contentViewer { background-color: red; width: 100%; } /* Fill up remaining space */ 
.container { position: relative; height: 100%; width: 100%; } /* Use containers for relative positioning '*/ 


<div id="wrapper"> 
    <section id="sidebar"> 
    <div class="container"> 
     <p>Left side</p> 
    </div> 
    </section> 
    <section class="contentViewer"> 
    <div class="container"> 
     <p>Yoopie</p> 
    </div> 
    </section> 
</div> 

Приведенных выше кодом является моей базовой структурой для размещения 2-колонки с использованием таблиц CSS. Это позволяет разрабатывать флюиды, но при этом может использовать относительное позиционирование. Нормальные таблицы-ячейки не поддерживают позицию: relative; Поэтому я всегда использую .container div как прямой дочерний элемент таблицы-таблицы