我有一个两列布局：
<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，我得到了一个滚动条。我尝试用 body 元素的 Overflow:hidden 来解决它，但我不知道这是否是正确的解决方案。
有任何想法吗？
如果我在对这个问题的评论中提出的假设是正确的，那么sidebar is 100%高，最重要的是你有一个23px标头，这样就会导致您的容器100% + 23px high.
将来你会在CSS中calc() http://hacks.mozilla.org/2010/06/css3-calc/ http://hacks.mozilla.org/2010/06/css3-calc/。这将解决您的问题。
现在，我想你应该通过 javascript 计算侧边栏的高度（=容器高度 - 23px）。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
