我有两列布局:
<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元素但我不知道这是否是正确的解决方案.
有任何想法吗？
如果我的假设我提出我的问题的评论是正确的,那么sidebar是100%高,最重要的是你有一个23px头,让你causs容器中100%+ 23px高.
将来你会在css calc() http://hacks.mozilla.org/2010/06/css3-calc/中找到.这将解决您的问题.
现在,我猜您应该通过javascript计算侧边栏的高度(=容器的高度 - 23px).
使#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;
}