2

我有一个问题，“内容主体”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>

谢谢！

4

3 回答 3

2

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

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

contentBody 也应该在高度 100% 的情况下工作。没有检查过。

更新的小提琴：

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

于 2013-09-04T02:52:45.220 回答
0

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

html{
    min-height: 100%;
}
html, body {
    width: 100%;
    overflow: hidden;
    margin: 0;
}
body
{
    height: 100%;
}
于 2013-09-04T02:30:26.530 回答
0

如果您确切知道希望所有元素的顶部和底部在哪里（这似乎是您所做的），通常最容易使用 'top'、'bottom'、'left' 和 'right' 而不是 'width ' 和 'height'，因为填充会增加宽度和高度，并会导致令人讨厌的溢出。无论如何，这在我的机器上有效。

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;
}
于 2013-09-04T02:59:33.097 回答