Fatal编程技术网
  • css/
  • Css 绝对/相对定位布局溢出

Css 绝对/相对定位布局溢出

css

Css 绝对/相对定位布局溢出,css,overflow,css-position,Css,Overflow,Css Position,很长一段时间以来，我一直在摆弄一个具体的布局问题，显然我走错了方向 以下是该方法的基本组成部分： <!DOCTYPE html> <html> <head> </head> <body> <div class="stretched"> <div class="header">SOME HEADER</div> <div class="someControls">

很长一段时间以来，我一直在摆弄一个具体的布局问题，显然我走错了方向

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

<!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>
​我试图做的是利用所有可用的垂直视口空间（页眉和页脚上下减去几个像素）拉伸
div，并用固定的with水平居中

这似乎很有效。问题是
溢出：auto属性未按我的要求应用于
内部内容。当
某些文本…
变长时，
内部
div与我的容器重叠，并且不显示滚动条

这是小提琴：

我希望避免在页面主体上使用滚动条，而是在
内部
div中使用滚动条管理溢出，从而使
拉伸
始终完全可见

我可以对
位置应用相同的技巧：绝对；顶部：0
也可以添加到
内部
div，但是我必须明确指定
标题的高度
+
someControls
，这是我想要避免的，因为它在我的所有页面上都是不同的

这就是我希望它的工作方式（除了部件
top:40px；
）：


我做错了什么？提前谢谢
 嘿，为什么在样式表中定义绝对位置

换这个


    .stretched {

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


现场演示

更新的js小提琴
删除


position: absolute;


加


border: 10px solid green;




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


border: 1px solid green;



即使这样也行。
我认为纯CSS不可能做到这一点（…在所有常见浏览器中都可以使用）

以下是使用规范的方法：

不幸的是，它只支持WebKit浏览器/Firefox


是时候在这个布局中使用几行JavaScript了。
+1用于结构良好的问题并尝试自己。需要IE7支持吗？不一定。不过，那太好了。谢谢！但我想避免页面主体上的滚动条，似乎我必须让我的问题更具体。
拉伸的
分区应始终完全可见，溢出应通过
内部
分区中的滚动条进行处理。是的，但没有固定高度。请查看我添加到问题中的另一把小提琴。谢谢！我必须让我的问题更精确，如果你能看看我在问题中添加的第二个提琴，那就太好了。

border: 1px solid green;