Question

我有一个场景，我想垂直划分3个部分的屏幕布局，如图所示！

标题行的高度固定，页脚行的高度相同。容器行填充屏幕上的剩余空间，如果内容溢出，则必须显示滚动。

我有下一个方法：

＆＃13;

html, body {
  height: 100%;
  margin: 0;
}
.box {
    display: table;
    height: 100%;
    width: 100%;
}

.header {
    display: table-row;
    height: 100px;
    background-color: cyan;
}

.content {
    display: table-row;
    height: 100%;
    overflow: auto;
    background-color: magenta;
}

.footer {
    display: table-row;
    height: 100px;
    background-color: red;
}

＆＃13;

<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
    <section class="box">
        <header class="header">
            <h1>Header</h1>
        </header>
        <section id='view-port-list' class="content">
            <div id="content-div">
                 <h1>Content</h1>
            </div>
        </section>
        <section class="footer">
            <h1>Footer</h1>
        </section>
    </section>
</body>

</html>

＆＃13;

我需要，当内容div溢出最大高度时，显示滚动。

谢谢，对不起我的英文：s

Answer 1

你可以这样做：）

HTML

<html>
    <div id="wrapper">
        <div id="header">header</div>
        <div id="content">content</div>
        <div id="footer">footer</div>
    </div>
</html>

CSS

html,body,div{
padding:0;
margin:0;
box-sizing:border-box;
-moz-box-sizing:border-box;}

html,body{
width:100%;
height:100%;}

#wrapper{
position:relative;
float:left;
width:100%;
min-height:100%;
padding:50px 0;}

#header{
position:fixed;
top:0;
width:100%;
height:50px;
background:#ccc;}

#content{
width:100%;}

#footer{
position: absolute;
bottom: 0;
width:100%;
height:50px;
background:#ccc;}

https://jsfiddle.net/t360k3ke/

如何将布局分为3个部分？

1 个答案: