Question

我正在制作一个具有960px宽div的CSS布局，我想让它从页面顶部到底部。显而易见的解决方案是min-height: 100%;，但它不起作用。这是我的CSS：

* {
margin: 0px;
padding: 0px;
}
body {
background: #FF0000;
height: 100%;
}
html {
height: 100%;
}
#sheet {
width: 960px;
min-height: 100%;
background: #000000;
margin: 0px auto 0px auto;
}
#sheet1 {
width: 760px;
min-height: 100%;
top: 0px;
bottom: 0px;
background: #FFFFFF;
}

从我的HTML：

<div id="sheet">
    <div id="sheet1">

    </div>
</div>

当我将＃sheet的min-height更改为height时，它显示正常，但如果内容占用超过一页，则会被切断。有解决方案吗？

Answer 1

尝试将#sheet更改为height：100％，而不是min-height 100％，并在＃sheet-1中添加一些内容。

Answer 2

仅当存在HTML元素（文本，图像或其他元素）时，使用100％才会生效。根据元素的长度，其高度将更高或更短。因此，min-height用于仅指定元素的确切长度或高度数。尝试使用像素而不是百分比。

Answer 3

因为您没有添加任何float或clear属性...

如果min-height属性未定义，CSS将忽略max-height和height，

除非您添加display:inline-block，但它可能会破坏您的margin:0px auto;并且我决定您这样做：

* {
  margin: 0px;
  padding: 0px;
 }
body {
 background: #FF0000;
 height: 100%;
 text-align:center;
}
body * {
 text-align:left;
}
html {
 height: 100%;
}
#sheet {
 width: 960px;
 display:inline-block; // It can make height auto
 min-height: 100%;
 background: #000000;
 margin: 0px auto 0px auto;
 text-align:center;
}
#sheet1 {
 width: 760px;
 display:inline-block;
 min-height: 100%;
 background: #FFFFFF;
 text-align:left;
}

用我的代码替换你的css，我认为它应该有用......

最小高度：100％？

3 个答案: