Question

我在我的网站上使用Bootstrap，我想让类jumbotron的元素占用整个用户窗口。然后，用户可以滚动浏览网站的其余部分。

目前，我正在使用它：

CSS：

jumbotron { height: 100vh;}

HTML：

<div class="row">
    <div class="jumbotron">
     ...
    </div>  
</div>

... rest of site ...

但是我想让我的网站傻瓜化，以使其尽可能可靠，并希望使用更广泛接受的方式。

Answer 1

您需要做的是为jumbotron的每位家长提供最多html CSS属性height:100%;

示例

html, body, .container, .row, .jumbotron { height: 100%; }

<html> <head> </head> <body> <div class="container"> <div class="row"> <div class="jumbotron"> ... </div> </div> </div> </body> </html>

请记住它仅适用于<body>代码之后的元素。

Answer 2

你需要container-flud 在jumbotron class之前对于全屏高度，创建一个类并给出类似.fullS_height {height: 100vh;}

的样式

<强> HTML：

<div class="container-flud">
  <div class="jumbotron fullS_height">
    <h1>Bootstrap Tutorial</h1>
    <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
  </div>
  <p>This is some text.</p>
  <p>This is another text.</p>
</div>

<强> CSS：

.fullS_height {
  height: 100vh;
  }

＆＃13;

.fullS_height {
  height: 100vh;
  }

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-flud">
  <div class="jumbotron fullS_height">
    <h1>Bootstrap Tutorial</h1>
    <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
  </div>
  <p>This is some text.</p>
  <p>This is another text.</p>
</div>

＆＃13;

如何通过滚动使元素占据全屏高度？

2 个答案: