CSS 100% 高度,带有许多嵌套和浮动 Div

发布于 2024-12-08 16:49:55 字数 255 浏览 6 评论 0原文

我正在开发一个由多个嵌套 Div 组成的布局,我希望让内容区域拉伸屏幕的高度。这非常简单,我过去已经做过,但不是在这种类型的布局中,并且正在努力解决它。我没有粘贴所有代码,而是将其上传到可以预览的服务器。

http://www.danyuschick.com/theembalmed/

任何帮助都会很棒。我现在对此无计可施。

I am working on a layout consisting of several nested Divs and I am ideally looking to get the content areas to stretch the height of the screen. This is pretty simple and I have done it in the past but not in this type of layout and am struggling with it. Instead of me pasting all of the code, I uploaded it to server that can be previewed.

http://www.danyuschick.com/theembalmed/

Any help would be great. I'm at my wit's end with this right now.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

咿呀咿呀哟 2024-12-15 16:49:55

http://www.w3.org/TR/CSS2/ visudet.html#the-height-property

<百分比>

指定百分比高度。百分比是根据生成的盒子的包含块的高度计算的。如果未明确指定包含块的高度(即,它取决于内容高度),并且该元素未绝对定位,则该值计算为“auto”

因此,每当您使用百分比作为高度时,元素的包含块都必须考虑明确的高度。

http://www.w3.org/TR/CSS2/visudet.html#the-height-property

< percentage >

Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

So whenever you use percentages as height the containing block of the element must have an explicit height to be considered.

却一份温柔 2024-12-15 16:49:55

看这个链接:

http://ninja-code.net/extra/stackoverflow_test.php

它使用的 DIV 少得多,并且会随着您填充内容而扩展。它还将您的图像保留为“内容”的边框 - 我不确定您是否希望它重复。

不过,我不想麻烦地将页脚推到底部。

Look at this link:

http://ninja-code.net/extra/stackoverflow_test.php

It uses a lot less DIV and will expand as you fill content. It also keeps your images as borders along the 'conent' - I wasn't sure if you were wanting it to repeat.

I didn't want to hassle with pushing the footer to the bottom though.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文