Question

我遇到一个问题，“内容正文”div（下面）的高度超出了页面的底部（并在页面页脚后面）。我希望这个div在存在长内容时滚动，它现在可以执行，但它不会滚动到div的底部，因为它超出了页面。我不确定导致这个问题的原因是什么？以下是一个示例：http://jsfiddle.net/Gg6qY/

CSS：

html, body {
    height:100%;
    width: 100%;
    overflow: hidden;
    margin: 0;
}
header {
    position: fixed;
    width: 100%;
    background: #006f3b;
    color: #fff;
    top: 0;
    height: 60px;
    padding: 10px;
}
#content {
    position: relative;
    height: 100%;
    width: 100%;
    padding: 60px 0 20px 0;
    /* Header height and footer height */
    margin: 0 auto;
    /* Center content */
}
#sidebar {
    position: absolute;
    background: #191919;
    color: #fff;
    left: 0;
    top: 60px;
    bottom: 0;
    width: 220px;
    padding: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
#contentHeader {
    position: relative;
    left: 220px;
    z-index: 100;
    padding: 10px;
    background: #fff;
    border-bottom: 1px solid #191919;
    -webkit-box-shadow: 3px 3px 3px #888888;
    -ms-box-shadow: 3px 3px 3px #888888;
    box-shadow: 3px 3px 3px #888888;
}
#contentBody {
    position: relative;
    background: #fff;
    height: 100%;
    margin-left: 220px;
    padding: 0 10px;
    overflow-y: scroll;
}
footer {
    position: fixed;
    width: 100%;
    background: #999;
    color: #000;
    bottom: 0;
    height: 20px;
    text-align: center;
}

HTML：

<body>
    <header>The header</header>
    <div id="content">
        <div id="sidebar">The Sidebar</div>
        <div id="contentHeader">The Content Header</div>
        <div id="contentBody">
            <p>The Content Body</p>
        </div>
    </div>
    <footer>The Footer</footer>

谢谢！

Answer 1

body和#content，超出窗口大小高度：100％表示正文内容区域的高度，如果添加到顶部和底部填充，则超出窗口。使用 box-sizing:border-box来解决这个问题。

contentBody扩展到最大可用高度，使其成为绝对值并设置为顶部和底部。

contentBody理想情况下也应该高度100％。没有检查过。

更新小提琴：

http://jsfiddle.net/GaYf4/1/

Answer 2

不确定您的预期目标是什么，但我认为这正是您所寻求的目标。

html{
    min-height: 100%;
}
html, body {
    width: 100%;
    overflow: hidden;
    margin: 0;
}
body
{
    height: 100%;
}

Answer 3

如果您确切知道所有元素的顶部和底部的位置（看起来像你这样做），通常最容易使用“顶部”，“底部”，“左侧”和“右侧”比'宽度'和'高度'，因为填充增加了宽度和高度，并将导致令人讨厌的溢出..反正这在我的机器上工作..

html, body {
    height:100%;
    margin: 0px;
}
header {
    position: absolute;
    left: 0px;
    right: 0px;
    background: #006f3b;
    color: #fff;
    top: 0px;
    height: 60px;
    padding: 10px;
}
#content {
    position: absolute;
    top: 60px;
    left: 0px;
    bottom: 0px;
    width: 100%;
}
#sidebar {
    position: absolute;
    background: #191919;
    color: #fff;
    left: 0px;
    top: 0px;
    bottom: 0px;
    width: 200px;
    padding: 10px;
}
#contentHeader {
    position: absolute;
    top: 0px;
    left: 220px;    
    height: 15px;
    padding: 10px;
    z-index: 2;
    background: #fff;
    right: 0px;
    border-bottom: 1px solid #191919;
    -webkit-box-shadow: 3px 3px 3px #888888;
    -ms-box-shadow: 3px 3px 3px #888888;
    box-shadow: 3px 3px 3px #888888;
}
#contentBody {
    position: absolute;
    padding: 10px;
    background: #fff;
    left: 220px;
    top: 38px;
    bottom: 20px;
    right: 0px;        
    overflow: auto;
}
footer {
    position: fixed;
    left: 0px;
    width: 100%;
    background: #999;
    color: #000;
    bottom: 0;
    height: 20px;
    text-align: center;
}

内容div高度超过页面高度

3 个答案: