很长一段时间,我正在摆弄一个特定的布局问题,我显然正在接近错误的方式.
以下是分解为基本组件的方法:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="stretched">
<div class="header">SOME HEADER</div>
<div class="someControls">
<input type="button" value="click me"/>
<input type="button" value="no me"/>
</div>
<div class="inner">
some text...
</div>
</div>
</body>
</html>
使用以下css:
.stretched {
position:absolute;
height:auto;
bottom: 0;
top: 0;
left: 0;
right: 0;
width: 250px;
margin: 30px auto 20px;
background-color: green;
}
.inner {
margin:10px;
background-color: red;
overflow: auto;
}
我正在尝试做的是让stretcheddiv利用所有可用的垂直视口空间(在页眉和页脚的上方和下方减去几个像素)并使用固定的水平居中.
这看起来效果很好.问题是该overflow: auto;属性未应用于inner我想要的内容.当some text...变长时,innerdiv与我的容器重叠并且不显示滚动条.
这是小提琴:小提琴#1
我想避免在页面主体上使用滚动条,而是通过inner …