Question

很长一段时间以来，我正在摆弄一个特定的布局问题，我显然正在接近错误的方式。

以下是分解为基本组成部分的方法：

<!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;        
}

我要做的是让stretched div利用所有可用的垂直视口空间（减去页眉和页脚上下几个像素）并使用固定的水平居中。

这看起来效果很好。问题是overflow: auto;属性未应用于我想要的inner内容。当some text...变长时，inner div与我的容器重叠并且不会显示滚动条。

这是小提琴：fiddle #1

我想避免在页面主体上使用滚动条，而是通过inner div中的滚动条管理溢出，从而使stretched始终完全可见。

我可以将position: absolute; top: 0; ...同样的技巧应用到inner div，但是我必须明确指定header + someControls的高度，我我想避免，因为它在我的所有页面上都有所不同。

这就是我想要它的工作原理（除top: 40px;部分外）：fiddle #2

我在这里做错了什么？提前谢谢！

Answer 1

我不认为这可以用纯CSS（..适用于所有常见的浏览器）。

以下是使用old Flexbox规范的方法：http://jsfiddle.net/thirtydot/xRr7e/

不幸的是，它只有works in WebKit browsers / Firefox。

现在是时候使用几行JavaScript进行此布局了。

Answer 2

嘿，为什么在样式表中定义绝对位置

替换这个

    .stretched {

    width: 250px;
    margin: 30px auto 20px;
    background-color: green;
}

现场演示http://jsfiddle.net/rohitazad/Rpdr9/366/

更新了js f http://jsfiddle.net/rohitazad/Rpdr9/368/

Answer 3

删除

position: absolute;

并添加

border: 10px solid green;

http://jsfiddle.net/Rpdr9/367/

编辑：如果你不喜欢巨大的边框，你可以将边框大小更改为1px。

border: 1px solid green;

即便如此。

具有绝对/相对定位布局的溢出

3 个答案: