Question

我有一个侧边栏（蓝色）设置为向左浮动。我将高度设置为100％，将body和html高度设置为100％。它工作正常：

enter image description here

问题是当浏览器小于内容窗格div（红色）时，侧边栏的高度变为与浏览器相同的高度。因此，如果我向下滚动，侧栏比页面短：

enter image description here

身体会自行调整，其高度覆盖内容窗格。但我猜侧边栏的高度是窗口的高度，因为它设置为正文的100％，设置为设置为窗口100％的html的100％。我可以为身体和html取出100％的高度，但这意味着我无法设置侧栏的高度，这将使其尽可能短。

我真的很难过。任何帮助将不胜感激

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并使用侧窗格的绝对定位来解决这个问题

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;
}

jsfiddle.net/hashem/J4WW9

Answer 1

我设法做到这一点的最好方法是创建一个围绕sideBar和contentPane的div。

Here是一支可以证明的笔！

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

解

1 个答案: