Question

我希望我的div.container高度为100％以填满整个屏幕。我尝试了一些东西，最小高度，身高100％，所有这些都是分开的，但它不会起作用。

以下是链接：http://jquery.colinvaneenige.nl/test/

所以.container具有100％的高度，同时仍然位于页面的中心！ :)

提前致谢，

Answer 1

您可以设置position: absolute和top至bottom来设置0：

#container {
   width: 400px;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background: red;
   margin: 0 auto;
}

Fiddle Demo 1

..或

body,html {
   min-height: 100%;
   height: 100%;
}

#container {
   width: 400px;
   height: 100%;
   background: red;
   margin: 0 auto;
}

Fiddle Demo 2

Answer 2

使用position: absolute并设置height: 100%而不是min-height。

.container {
     position: absolute;
     height: 100%;
}

然后你必须使用其他CSS技巧让它回到居中位置，例如让你说容器的宽度为1000px：

.container {
     width: 1000px;
     left: 50%;
     margin-left: -500px; /* negative half of the total with of the container */
     /* And code from above line */
     position: absolute;
     height: 100%;
}

Answer 3

我只是通过创建一个具有100％高度的单个单元格的表格，然后将div放在其中来获得成功。

Answer 4

这是不可能的，高度必须以像素为单位：/ 宽度只有％:) 你可以制作一个“最小高度：100px;”

Css 100％高度不会工作

4 个答案: