6

很长一段时间以来，我一直在摆弄一个特定的布局问题，显然我走错了路。

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

<!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; ...我也可以对div应用相同的技巧inner，但是我必须明确指定header+的高度someControls，这是我想避免的，因为它在我的所有页面上都不同。

这就是我想要的工作方式（除了部分top: 40px;）：fiddle #2

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

4

3 回答 3

1

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

这是一种使用旧 Flexbox规范的方法：http: //jsfiddle.net/thirtydot/xRr7e/

不幸的是，它只适用于WebKit 浏览器/Firefox。

是时候为这个布局使用几行 JavaScript 了。

于 2012-04-24T12:01:09.963 回答
0

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

替换这个

    .stretched {

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

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

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

于 2012-04-24T08:55:12.060 回答
0

消除

position: absolute;

并添加

border: 10px solid green;

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

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

border: 1px solid green;

即使这样也有效。

于 2012-04-24T08:58:57.640 回答