绝对/相对定位布局溢出 [英] Overflow with absolute/relative positioning layout
问题描述
相当长的一段时间，我正在摆弄一个具体的布局问题，我明显接近了错误的方式。
这里是分解为基本组件：
<！DOCTYPE html>
< html>
< head>
< / head>
< body>
< div class =stretched>
< div class =header> SOME HEADER< / div>
< div class =someControls>
< input type =buttonvalue =click me/>
< input type =buttonvalue =no me/>
< / div>
< div class =inner>
一些文本...
< / 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;
}
我想要做的是让 stretch div使用所有可用的垂直视口空间（减去页眉和页脚的上方和下方几个像素），并以水平方向居中固定的。
这似乎工作得很好。问题是 overflow：auto; 属性不应用于 inner 内容，因为我想要它。当一些文本... 变得更长时， inner div与我的容器重叠，并且不显示滚动条。
这是小提琴：小提琴＃1
我想避免在页面体上有滚动条，而是在 inner div中有滚动条管理的溢出，从而使 stretch 总是完全可见。
我可以使用 top：0; ... 到 inner div，但是我必须指定 header + 显式地，我想避免，因为它是不同的所有我的页面上的someControls 。
这是它的工作原理，我想要它（除了 top：40px; ）： a href =http://jsfiddle.net/5gyt5/6/ =nofollow>小提琴＃2
我做错了什么这里？提前感谢！
我认为这不可能与纯CSS（..这在所有常见的浏览器）
以下是使用旧的Flexbox 规格： http://jsfiddle.net/thirtydot/xRr7e/
但很遗憾，只有适用于 WebKit浏览器/ Firefox。
现在是为这个布局使用几行JavaScript的时候了。
for quite some time I'm fiddling around with a specific layout matter that I'm obviously approaching the wrong way.
Here is the approach broken down to its basic components:
<!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>
with the following 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;
}
What I'm trying to do is having the stretched div utilizing all available vertical viewport space (minus a few pixels above and below for header and footer) and being centered horizontally with a fixed with.
This seems to work pretty well. The problem is that the overflow: auto; property is not applied to the inner content as I want it to. When some text... gets longer, the inner div overlaps my container and shows no scrollbars.
Here's the Fiddle: fiddle #1
I want to avoid having scrollbars on the page body and instead having the overflow managed by scrollbars inside the inner div, thus making stretched always entirely visible.
I could apply the same trick with position: absolute; top: 0; ... to the inner div as well, but then I have to specify the height of header + someControls explicitly, which I want to avoid, because it is different on all my pages.
This is how it works like I want it to (except for the part top: 40px;): fiddle #2
What am I doing wrong here? Thanks in advance!
I don't think this is possible with pure CSS (..that works in all common browsers).
Here's an approach using the old Flexbox spec: http://jsfiddle.net/thirtydot/xRr7e/
Unfortunately, it only works in WebKit browsers/Firefox.
It's time to use a few lines of JavaScript for this layout..
这篇关于绝对/相对定位布局溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
