没有滚动条的100％Div高度 [英] 100% Div height without scrollbar
问题描述
我有两列的布局：
< 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;
颜色：＃000;高度：100％;最小高度：100像素;
}
body {
background：#fff;高度：100％;最小高度：100像素;溢出：隐藏;
}
#header {
width：100％;
职位：亲属;
float：left;
height：23px;
}
#container {
position：relative;
宽度：100％;高度：100％;
margin：auto;背景：蓝色;
}
#contentwrapper {
float：left;
背景：红色;
职位：亲属;
width：700px;填充：0像素;保证金：0像素;
height：auto;
}
#sidewrapper {
float：left;
职位：亲属;
width：159px;高度：100％;
padding：0px;保证金：0像素;
}
...但由于标头的23像素高度，我得到了一个滚动条。我试图用溢出来解决它：隐藏的身体元素，但我不知道这是否是正确的解决方案。
任何想法？
$ b $如果我在我对该问题的评论中提出的假设是正确的，那么 sidebar 为 23px 标题，这样可以让你的容器小于 100％ + 23px 高。 未来，您将拥有在css calc（） http： //hacks.mozilla.org/2010/06/css3-calc/ 。这将解决你的问题。
现在，我猜你应该通过javascript来计算边栏的高度（=容器高度 - 23px）。
I have a two column layout:
<html>
<head></head>
<body>
<div id="container">
<div id="header"></div>
<div id="sidewrapper"></div>
<div id="contentwrapper"></div>
</div>
</body>
</html>
I want to have both sidebar and content be 100% in height but the most top container's min-height should be 100%.
I tried to solve it with the following 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;
}
...but I get a scrollbar because of the header's 23px height. I tried to solve it with overflow:hidden for the body element but I do not know if that is the right solution.
Any ideas?
If my assumption I put forward in my comment to the question is right, then sidebar is 100% high, and on top of that you have a 23px header, so that causs your container to be 100% + 23px high.
In the future you will have in css calc() http://hacks.mozilla.org/2010/06/css3-calc/ . This will solve your problem.
Now, I guess you should calculate the height of the sidebar ( = height of container - 23px), by javascript.
这篇关于没有滚动条的100％Div高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
