logo标签列表

多个div使用CSS的min-height属性设置为100%？

htmlheightcss
5

好的。我正在尝试让一个页面显示视口高度的100％，但是问题在于该页面有多个不总是嵌套的divs。我已经浏览了多个问题和其他网站，但是我找不到适合我需求的答案。

我目前的布局如下：

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

如果头部和底部高度都是80像素，我想让内容div填满其余的可见区域。我尝试将html、body和容器div的高度都设置为"height:100%"，然后将内容div的min-height和height都设置为100%，但这只会使div扩展到视口的100%，然后页脚会被推下80像素（因为头部有80像素），所以整个页面最终高度为100%+160px（两个80像素的div）。

您有什么好的想法吗？谢谢。

5个回答
4

你可以使用简单的 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;
}
令人惊讶的是，我认为这个最优雅！谢谢，是的，它确实起作用了。 - marked-down
1

原始帖子在这里：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;
}
我怀疑这不是你写的 ;) 你能指明作者吗？ - Blender
你是自己写所有的代码吗？我本来可以直接贴链接到页面上，但是几周后我看到有人只回答了一个链接，结果被版主扣了1分，并问道：如果这个网站将来关闭怎么办？在这里粘贴一些代码...我就像这样做了，把代码粘贴了进来，还做了更多的事情 :) - rmagnum2002
其实，是的，我会。我会写并重复利用我的解决方案。只需标明作者即可。直接链接到一个页面并称之为答案是被不赞同的，但是如果链接到页面并提供一些代码/文本则可以。 - Blender
只是一点点，我之前保存了这个页面，因为我需要在我的工作中使用它。所以，我会提供一个链接，我有其他带链接的帖子，但在这里我找不到它。你关于给作者信用的说法是完全正确的。 - rmagnum2002
在第一行，就是这个。 - rmagnum2002
0

我现在没有 Chrome，而且在 jsfiddle 中似乎无法正常工作，但您应该能够通过将所有内容设置为绝对定位，使页眉的顶部设置为 0 像素，页脚底部设置为 0 像素，并使内容的上部：80px，下部 80px 来实现此目标。您还需要使容器、body 和可能的 html 占据 100% 的高度并具有绝对或相对定位。

0
 *{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时会发生什么是真的不理想，但您可以通过使用高度基于媒体查询来简化较小屏幕的设计来解决此问题。

0

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

  • 使用基于表格的布局（完全支持，但不被推荐）
  • 使用新的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;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接