使所有列均为窗口高度的 100%
我可能只是休息了一天,错过了一个简单的修复,但我有一个三列布局(您可以查看测试页面 此处),我希望所有三列都填满浏览器窗口。实际上,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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
你想要的是等高的列。
实际上比看起来要复杂一些。
这是我使用的一个解释,它帮助了很多。
另外,它可以工作,而且很干净,并且符合标准,等等。
编辑
它并不是那么“干净”,因为它用最少的代码完成了工作,没有黑客。每列都有一个新的嵌套 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.
如果你想要等高的列,请使用 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.