Question

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

我似乎无法让内部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

来完成这项工作有人请帮助我！我有点困惑为什么这不起作用

Answer 1

你根本不需要display: table，这对你来说不会有用。

由于你知道标题的高度，所以你真正要做的就是给#content一个position: absolute（默认情况下，如果它没有被包裹，则相对于body标签在任何relative位置的东西。然后你可以将它从需要开始的地方（标题的底部）一直延伸到底部，这样做：

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

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

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

Answer 2

尝试这样的事情：

sandbox.css：

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

sandbox.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>

显示表格html混乱

2 个答案: