将div高度设置为完整显示高度

Question

这遍及stackoverflow，但它对我不起作用。 使用twitter bootstrap 3，我需要将jumbotron类div设置为完整显示高度。

这是我的测试网站： http://test.ulkas.eu/

我读过我应该包括

html {
    height: 100%;
}
body {
    min-height: 100%;
    padding-top: 50px;
}

但它仍然无效。也许我在某处出现了一些语法错误？

Answer 1

html / body的高度始终只是内容的高度 - 这些标签的行为与标准div / block标签略有不同。要获得真正100％高的东西，最好的办法是使用position：absolute / fixed将其从标准页面流中删除，然后将div设置为100％高。像这样：

.fullheight {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    z-index: 2;
}

我认为总是值得在我正常页面流之外的任何位置设置z-index，允许您控制哪些部分出现在其他部分之上。

Answer 2

为了将100％高度属性应用于内部分区，您需要向所有父div提及相同的属性。所以添加

body{height: 100%;min-height:100%;padding-top:50px;}

.jumbotron{height:100%;}

到你的身体以及jumbortron课程