CSS填充100％的高度。不同的浏览器大小

本文介绍了CSS填充100％的高度。不同的浏览器大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个侧边栏（蓝色），设置为向左浮动。我已将高度设置为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;
}