CSS 最小高度 100%,具有多个 div

发布于 2024-12-18 02:49:23 字数 644 浏览 1 评论 0原文

好的。我试图让页面显示 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 技术交流群。

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

发布评论

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

评论(5

末骤雨初歇 2024-12-25 02:49:23

您可以使用简单的 display:table 属性来完成此操作。

检查这个:

http://jsfiddle.net/HebB6/1/

html,
body,
.container {
    height: 100%;
    background-color: yellow;
}

.container {
    position: relative;
    display:table;
    width:100%;
}

.content {
    background-color: blue;
}

.header {
    height: 80px;
    background-color: red;
}

.footer {
    height: 80px;
    background-color: green;
}
.content, .header, .footer{
    display:table-row;
}

You can do this with simple display:table property.

Check this:

http://jsfiddle.net/HebB6/1/

html,
body,
.container {
    height: 100%;
    background-color: yellow;
}

.container {
    position: relative;
    display:table;
    width:100%;
}

.content {
    background-color: blue;
}

.header {
    height: 80px;
    background-color: red;
}

.footer {
    height: 80px;
    background-color: green;
}
.content, .header, .footer{
    display:table-row;
}
衣神在巴黎 2024-12-25 02:49:23

原始帖子在这里: http://peterned.home.xs4all.nl/examples/csslayout1.html

http://jsfiddle.net/cLu3W/4/

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    background:gray;
}

div#container {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    width:750px;
    background:#f0f0f0;
    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */
}
div#header {
    padding:1em;
    background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
    border-bottom:6px double gray;
}
div#content {
    padding:1em 1em 5em; /* bottom padding for footer */
}
div#footer {
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
    background:#ddd;
    border-top:6px double gray;
}

original post here: http://peterned.home.xs4all.nl/examples/csslayout1.html

http://jsfiddle.net/cLu3W/4/

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    background:gray;
}

div#container {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    width:750px;
    background:#f0f0f0;
    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */
}
div#header {
    padding:1em;
    background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
    border-bottom:6px double gray;
}
div#content {
    padding:1em 1em 5em; /* bottom padding for footer */
}
div#footer {
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
    background:#ddd;
    border-top:6px double gray;
}
春庭雪 2024-12-25 02:49:23

我现在没有 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.

浪推晚风 2024-12-25 02:49:23
 *{margin:0; padding:0;}
 .header{height:80px;  background:salmon; position:relative; z-index:10;}
 .content{background:gray; height:100%; margin-top:-80px;}
 .content:before{content:''; display:block; height:80px; width:100%;}
 .footer{height:80px; width:100%; background:lightblue; position:absolute; bottom:0;}

这并不完美。例如,当文本溢出 .content 时发生的情况确实不理想,但您可以使用 基于高度的媒体查询,以简化较小屏幕的设计。

 *{margin:0; padding:0;}
 .header{height:80px;  background:salmon; position:relative; z-index:10;}
 .content{background:gray; height:100%; margin-top:-80px;}
 .content:before{content:''; display:block; height:80px; width:100%;}
 .footer{height:80px; width:100%; background:lightblue; position:absolute; bottom:0;}

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.

亽野灬性zι浪 2024-12-25 02:49:23

这可以通过多种方式实现:

  • 使用表格基本布局(完全支持,但不赞成)
  • 使用新的 CSS 3 弹性框布局(不支持旧的 IE)
  • 使用绝对定位

我推荐第三个选项。请参阅 http://jsfiddle.net/HebB6/ 中的示例

HTML:

<html>
<body>
    <div class="container">
         <div class="header">
             Header
         </div>
         <div class="content">
             Content
         </div>
         <div class="footer">
             Footer
         </div>
    </div>
</body>
</html>

CSS:

html,
body,
.container {
    height: 100%;
    background-color: yellow;
}

.container {
    position: relative;
}

.content {
    background-color: blue;
    position: absolute;
    top: 80px;
    bottom: 80px;
    left: 0;
    right: 0;
}

.header {
    height: 80px;
    background-color: red;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.footer {
    height: 80px;
    background-color: green;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

This can be achived in multiple ways:

  • Use a table base layout (fully supported, but frowned upon)
  • Use the new CSS 3 flex box layout (no old IE support)
  • Using absolute positioning

I would recomend the 3rd option. See an example at http://jsfiddle.net/HebB6/

HTML:

<html>
<body>
    <div class="container">
         <div class="header">
             Header
         </div>
         <div class="content">
             Content
         </div>
         <div class="footer">
             Footer
         </div>
    </div>
</body>
</html>

CSS:

html,
body,
.container {
    height: 100%;
    background-color: yellow;
}

.container {
    position: relative;
}

.content {
    background-color: blue;
    position: absolute;
    top: 80px;
    bottom: 80px;
    left: 0;
    right: 0;
}

.header {
    height: 80px;
    background-color: red;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.footer {
    height: 80px;
    background-color: green;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文