Flx*_*dnz 6 css css-position overflow
很长一段时间,我正在摆弄一个特定的布局问题,我显然正在接近错误的方式.
以下是分解为基本组件的方法:
<!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
我想避免在页面主体上使用滚动条,而是通过innerdiv中的滚动条管理溢出,从而stretched始终完全可见.
我也可以将相同的技巧应用position: absolute; top: 0; ...到innerdiv中,但是我必须明确指定header+ 的高度someControls,我想避免它,因为它在我的所有页面上都是不同的.
这就像我想要的那样(除了部分top: 40px;):小提琴#2
我在这做错了什么？提前致谢!
嘿为什么在样式表中定义绝对位置
替换这个
.stretched {
width: 250px;
margin: 30px auto 20px;
background-color: green;
}
现场演示 http://jsfiddle.net/rohitazad/Rpdr9/366/
更新了js小提琴http://jsfiddle.net/rohitazad/Rpdr9/368/