CSS填充100％的高度。不同的浏览器大小 [英] CSS Fill 100% of height. Different Browser Sizes
问题描述
我有一个侧边栏（蓝色），设置为向左浮动。我已将高度设置为100％，body和html高度设置为100％。效果很好：
I have a sidebar(blue) which is set to float left. I've set the height to 100% and body and html height set to 100%. It works fine:
问题是当浏览器小于内容窗格div（红色）时，边栏的高度与浏览器的高度相同。因此，如果我向下滚动，侧栏比页面短：
The problem is when the browser is smaller than the content pane div (red), the height of the sidebar becomes the same height as the browser. So if i scroll down, the side bar is shorter than the page:
身体调整自己，它的高度覆盖内容窗格。但我想侧边栏的高度是窗口的高度，因为它设置为100％的body设置为100％的html设置为100％的窗口。我可以取出身体和html的100％高度，但这意味着我不能设置侧边栏的高度，这将使它尽可能短。
The body adjusts itself though, its height covers the content pane. But I guess the height of the sidebar is the height of the window because, it's set to 100% of the body which is set to 100% of the html which is set to 100% of the window. I can take out 100% height for the body and html but that means I can't set the height of the side bar, which will make it as short as possible.
我真的在这里。任何帮助将不胜感激。
I'm really stumped here. Any help would be appreciated
html：
<html>
<body>
<div id='menubar'>ignore this for now</div>
<div id='sidebar'>a few elements<div>
<div id='contentPane'>lots of elements</div>
</body>
</html>
css：
html,body{
padding:0px;
margin:0px;
height:100%;
}
#sidebar{
float:left;
height:100%;
}
解决方案
Hashem Qolami通过包装div并使用侧窗格的绝对定位来解决这个问题
SOLUTION
Hashem Qolami solved this by wrapping the divs and using absolute positioning for the side pane
html：
<body>
<div class="wrapper">
<div id='menubar'>note the height of this element</div>
<div id='sidebar'>a few elements</div>
<div id='contentPane'>a lot of elements</div>
</div>
</body>
css：
html,body{
padding:0px;
margin:0px;
height:100%;
}
.wrapper {
min-height: 100%;
position: relative;
background-color: gold;
}
#menubar {
height: 30px;
background-color: darkcyan;
}
#sidebar{
position: absolute;
left: 0;
top: 30px; /*HEIGHT OF THE MENU BAR*/
bottom: 0;
width: 200px;
background-color: orange;
}
#contentPane {
margin-left: 200px;
}
推荐答案
这是通过创建一个围绕sideBar和contentPane的div。
The best way I manage to do this is by creating a div that surrounds both sideBar and contentPane.
这里'sa笔来演示！
这篇关于CSS填充100％的高度。不同的浏览器大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
