使所有列均为窗口高度的 100%

发布于 2024-11-03 14:43:21 字数 395 浏览 3 评论 0原文

我可能只是休息了一天,错过了一个简单的修复,但我有一个三列布局(您可以查看测试页面 此处),我希望所有三列都填满浏览器窗口。实际上,99%(或可能 100%)的情况下,其中一列会延伸超过折叠线,因此其他两列延伸到与最长的列相同的长度即可。这看起来很简单,但我还没有让它在整个网站上一致地工作。

我包括CSS。如果有人想查看 Tumblr 主题标记,请告诉我。现在有点杂乱无章(还没有机会清理它),但它可能仍然有帮助。

有问题的样式表可以在这里找到(我提前道歉......)

I'm probably just having an off day and missing an easy fix, but I have a three column layout (you can view the test page here) and I'd like all three columns to fill the browser window. In practice, 99% (or maybe 100%) of the time, one of the columns will extend past the fold, so it's a matter of the other two columns extending to the same length as the longest column. This seems easy enough, but I've yet to get it to work consistently throughout the site.

I'm including the CSS. If anyone wants to see the Tumblr theme markup, just let me know. It's something of a disorganized mess right now (haven't had a chance to clean it up yet), but it may still be helpful.

The offending style sheets are available right here (I apologize in advance...)

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

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

发布评论

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

评论(2

妳是的陽光 2024-11-10 14:43:21

你想要的是等高的列。

实际上比看起来要复杂一些。

这是我使用的一个解释,它帮助了很多。

另外,它可以工作,而且很干净,并且符合标准,等等。

编辑

它并不是那么“干净”,因为它用最少的代码完成了工作,没有黑客。每列都有一个新的嵌套 div,但为效果付出的代价相当小

What you want is equal height columns.

It's actually a little more complicated than it seems.

Here's an explanation that I used which helped a lot.

Plus it works, and is clean, and is standards compliant, etc., etc.

edit

It's not so much "clean" as it gets the job done with minimal code and no hacks. There IS a new nested div for every column, but that's a fairly small price to pay for the effect.

北音执念 2024-11-10 14:43:21

如果你想要等高的列,请使用 html 4.0 而不是 xhtml 如果你使用 xhtml,则必须使用 javascript 使列的高度相等。我很确定,因为我也遇到过这个问题。

if you want equal height columns use html 4.0 not xhtml if you use xhtml you will have to use javascript to make the columns equal in height. Im pretty sure cos I've come across this problem too.

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