2

所以我试图用一些基本的东西来构建一个布局：一个标题，它有一个固定的大小；和内容，只允许与页面一样大 - 任何溢出都应该在其中滚动。

我似乎无法让内部 div 只滚动并让溢出留下。

CSS：

body {
    display:table;
    width: 100%;
}         
#content-body,#header {
    display:table-row;
}

 #content {
    text-align: center;
    height: 100%;
    width: 50%;
    overflow-y: scroll;
    background-color: red;
}

HTML：

<body>
    <div id="header">
        header here
    </div>

    <div id="content-body">
            <div id="content">
             <--   Need this to scroll -->
            </div>

        </div>
    </div>
</body>

JSFiddle _

我只想用 css 和 html 来完成这项工作

有人请帮帮我！我有点困惑为什么这不起作用

4

2 回答 2

2

你根本不需要display: table，那对你没有用。

由于您知道标题的高度，因此您真正需要做的就是给出#contenta （如果它没有包含在任何有位置的东西中，则默认情况下position: absolute它是相对于标签的）。然后你可以把它从它需要开始的地方（标题的底部）一直拉伸到底部，这样做：bodyrelative

#content {
    position: absolute;
    top: 150px; /* or whatever your header height is */
    bottom: 0;
}

请参阅我的 jsfiddle 示例：http: //jsfiddle.net/W43UV/5/

（我将填充和边距设置body为0以防止top偏移被弄乱）

于 2013-10-02T21:30:57.810 回答
0

尝试这样的事情：

沙盒.css：

#header {
    width: 100%;
    height: 40px;
    background-color: #ff4200;
}
#content-body {
    width: 100%;
}
#content {
    width: 100%;
    height: 40px;
    overflow-y: scroll;
    background-color: #0042ff;
}

沙盒.html：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="sandbox.css">
    </head>
    <body>
        <div id="header">
            header here
        </div>
        <div id="content-body">
            <div id="content">
                <-- Need this to scroll -->
            </div>
        </div>
    </body>
</html>
于 2013-10-02T22:03:52.957 回答