Question

我想将三个div放在另一个下面。即基本上要避免任何页面滚动，除了中间div。

<div id="one">

</div>
<div id="two">

</div>
<div id="three">

</div>

#one{
    width:100%;
    height: 10%;
}
#two{
    width:100%;
    height: 80%;
}
#three{
    width:100%;
    height: 10%;
}

即使内容高度低于80％，我也希望中心div占据全高。如果内容高度> 80％;我想要一个滚动条出现。

我怎样才能用纯CSS实现这个目标？

Answer 1

你非常接近，你只需要为身体和html添加高度和宽度以使其工作。试试下面的演示。

DEMO

<强> CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}

还在中间div上添加overflow:auto;以启用滚动。查看this演示文稿以获取长文本。

Answer 2

您需要为Scoll Bar设置overflow:auto，并在第二个div下面看演示全高度

DEMO HERE

DEMO With ScrollBar

Answer 3

使用保证金：0自动。它在中心显示div

CSS Div自动增加高度

3 个答案:

DEMO