0

我正在制作一个具有 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's 更改为 时，它显示正常min-height，height但如果内容占用超过一页，它就会被切断。有解决方案吗？

4

3 回答 3

1

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

于 2012-12-18T02:20:54.573 回答
0

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

于 2012-12-18T02:01:02.213 回答
0

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

CSS 将忽略min-heightand 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，我认为它应该可以工作......

于 2012-12-18T02:53:02.517 回答