CSS 最小高度 100%,具有多个 div
好的。我试图让页面显示 100% 的视口高度,但问题是页面有多个并不总是嵌套的 div。我一直在浏览多个问题和其他网站,但找不到适合我需要的答案。
我目前的布局如下:
<html>
<body>
<div class="container">
<div class="header">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
</body>
</html>
由于页眉和页脚各为 80px,我试图让内容 div 填充视口的其余部分。我尝试过设置 html、body 和 &将容器 div 设置为“height:100%”,然后将内容 div 设置为 min-height:100% 和 height:100% 但这只会使 div 扩展到视口的 100%,然后页脚被向下推80px(因为标题是 80px),所以整个页面最终为 100% + 160px(两个 80px div)。
有什么想法吗?干杯。
Okay. I'm trying to get a page to display 100% of the height of the viewport, but the catch is the page has multiple divs that aren't always nested. I've been browsing multiple questions and other websites and I cannot find an answer that suits my needs.
I currently have a layout as so:
<html>
<body>
<div class="container">
<div class="header">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
</body>
</html>
Where as the header and footer is 80px each, I am trying to get the content div to fill the rest of the viewport. I've tried setting html, body, & the container div to "height:100%" each and then setting the content div to min-height:100% and height:100% but that just makes the div expand to 100% of the viewport, and then the footer gets pushed down 80px (because the header is 80px), so the full page ends up as 100% + 160px (two 80px divs).
Any ideas? Cheers.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
您可以使用简单的
display:table
属性来完成此操作。检查这个:
http://jsfiddle.net/HebB6/1/
You can do this with simple
display:table
property.Check this:
http://jsfiddle.net/HebB6/1/
原始帖子在这里: http://peterned.home.xs4all.nl/examples/csslayout1.html
http://jsfiddle.net/cLu3W/4/
original post here: http://peterned.home.xs4all.nl/examples/csslayout1.html
http://jsfiddle.net/cLu3W/4/
我现在没有 chrome,这似乎在 jsfiddle 中不起作用,但是您应该能够通过使所有内容绝对定位来实现此目的,将页眉顶部设置为 0px,页脚底部设置为 0px,内容设置为顶部:80px,底部80px。您还必须使容器、主体以及可能的 html 占据 100% 的高度并具有绝对或相对定位。
I don't have chrome right now and this doesn't seem to be working in jsfiddle but you should be able to achieve this by making all absolute positioned, having header have top set at 0px, footer bottom at 0px, and content have top: 80px, bottom 80px. You'll also have to make the container, body, and possibly html take up 100% height and have absolute or relative positioning.
这并不完美。例如,当文本溢出
.content
时发生的情况确实不理想,但您可以使用 基于高度的媒体查询,以简化较小屏幕的设计。This is not perfect. For example, what happens when the text overflows
.content
is really not ideal, but you could solve this problem by using height based media queries to simplify the design for smaller screens.这可以通过多种方式实现:
我推荐第三个选项。请参阅 http://jsfiddle.net/HebB6/ 中的示例
HTML:
CSS:
This can be achived in multiple ways:
I would recomend the 3rd option. See an example at http://jsfiddle.net/HebB6/
HTML:
CSS: