Вопросы Теги

100% высота Div без полосы прокрутки

У меня двухколоночный макет: 

<html>
 <head></head>
 <body>

    <div id="container">
        <div id="header"></div>
        <div id="sidewrapper"></div>
        <div id="contentwrapper"></div>
    </div>
 </body>
</html>

Я хочу, чтобы и боковая панель, и содержимое составляли 100% по высоте, но минимальная высота самого верхнего контейнера должна быть 100%.

Я попытался решить эту проблему с помощью следующего CSS: 

* {
    margin: 0;
    padding: 0;
}

html {
    font-family: Georgia, serif;
    color: #000; height:100%; min-height:100px;
}

body {
    background: #fff; height:100%; min-height:100px; overflow:hidden;   
}

#header {
width: 100%;
position: relative;
float: left;
height: 23px;
}

#container {
    position:relative;
    width: 100%; height:100%;
    margin: auto; background:blue;
}

#contentwrapper {
    float:left;
    background:red;
    position: relative;
    width: 700px; padding:0px; margin:0px;
    height: auto; 
}

#sidewrapper {
    float:left;
    position: relative;
    width: 159px; height:100%; 
    padding:0px; margin:0px;
}

... но я получаю полосу прокрутки из-за высоты заголовка 23 пикселя. Я попытался решить эту проблему с помощью overflow: hidden для элемента body, но я не знаю, правильное ли это решение.

Есть идеи?

9
задан Upvote 25 November 2010 в 08:31
поделиться