sách gpt4 ăn đã đi

css - 绝对/相对定位布局溢出

In lại 作者:技术小花猫 更新时间:2023-10-29 11:24:27 30 4
mua khóa gpt4 giày nike

很长一段时间以来,我一直在摆弄一个特定的布局问题,但我显然采用了错误的方式。

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



<đầu>



SOME HEADER






some text...




使用以下 CSS:

.stretched {
vị trí: tuyệt đối;
height:auto;
bottom: 0;
trên cùng: 0;
trái: 0;
right: 0;
width: 250px;
margin: 30px auto 20px;
background-color: green;
}

.inner {
margin:10px;
background-color: red;
tràn: tự động;
}

我想要做的是让 stretched div 利用所有可用的垂直视口(viewport)空间(减去页眉和页脚上方和下方的几个像素)并水平居中.

这似乎工作得很好。问题是 tràn: tự động; 属性没有像我希望的那样应用于 bên trong 内容。当 some text... 变长时,bên trong div 与我的容器重叠并且不显示滚动条。

这是 fiddle :fiddle #1

我想避免在页面主体上使用滚动条,而是让 bên trong div 中的滚动条管理溢出,从而使 stretched 始终完全可见。

我可以对 position: absolute; 应用相同的技巧;顶部:0; ... đến bên trong div,但是我必须明确指定 tiêu đề + someControls 的高度,这我想避免,因为它在我所有的页面上都是不同的。

这就是我想要的效果(top: 40px; 部分除外):fiddle #2

我在这里做错了什么?提前致谢!

câu trả lời hay nhất

我认为使用纯 CSS 是不可能的(..它适用于所有常见的浏览器)。

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

不幸的是,它只有works in WebKit 浏览器/Firefox。

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

关于css - 绝对/相对定位布局溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10294543/

30 4 0
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress