Question

我有两列布局：

<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;
}

...但由于标题的高度为23px，我得到了一个滚动条。我尝试用overflow解决它：隐藏为body元素但我不知道这是否是正确的解决方案。

有什么想法吗？

Answer 1

如果我在对该问题的评论中提出的假设是正确的，那么sidebar是100%高，并且最重要的是你有一个23px标题，这样就可以了您的容器为100% + 23px高。

将来你将拥有css calc() http://hacks.mozilla.org/2010/06/css3-calc/。这将解决您的问题。

现在，我猜您应该通过javascript计算侧边栏的高度（=容器高度 - 23px）。

Answer 2

使#header位置绝对。这将使该块从正常流量中删除，并且您将能够使其他块的高度等于其父级。

#header {
    position: absolute;
    width: 100%; height: 23px;
    top: 0; left: 0;
}
#sidewrapper,
#contentwrapper {
    float: left;
    width: 50%;
    height: 100%;
}
#sidewrapper .content,
#contentwrapper .content {
    margin-top: 23px;
}

Answer 3

将元素的高度与其父元素进行比较。在您的情况下，我建议您指定具体的宽度和宽度。 “包含”的高度，因为很难在许多机器上假装屏幕的大小。

如果您坚持使用百分比，我建议您使用两个元素，例如标题25％高度和内容75％高度。

没有滚动条的100％Div高度

3 个答案: