跨度Bootstrap很好覆盖整个页面

Question

我在html代码中使用bootstrap如下：

<div class="well well-lg">
    <!-- Div code -->
</div>

div的元素不会跨越整个页面，但我希望井能够跨越整个页面。我在我的css文件中添加了以下代码：

html, body { height: 100%; }

.well {
height:100%;
}

此代码无法跨越整个页面。

我在css中添加了哪些代码来实现我的目标？

Answer 1

你可以通过多种方式实现，你可以使用以下方法：

.well {
    position: absolute;
    height: 100%;
    width: 100%;
}

但是这可能不适合你当前的项目，因为我不知道你网页上还有什么。

您也可以使用

.well {
    height: 100vh;
}

但是对于一些旧的浏览器，这也不受支持。在这里查看它的支持http://caniuse.com/#search=vh

Answer 2

Tejasi Latkar ，你好。 Conormcafee 的建议对您有所帮助。

但如果您只想让well占据/填充屏幕的其余部分，那么您可以试试这个......

.well {
  height: -webkit-calc(100vh - 50px);
  height: -moz-calc(100vh - 50px);
  height: calc(100vh - 50px);
} 

这样做会从总视口高度中减去50px的高度 假设您的导航栏高度为50px 使用此代码，well现在只会到达屏幕底部 而不是50px超过屏幕的底部。

如果您正在寻找的话，我希望这能为您提供另一种选择。