Как сделать так, чтобы элемент занимал всю высоту экрана при прокрутке?

Я использую Bootstrap на своем веб-сайте, и я хочу, чтобы элемент с классом jumbotronзанял полное окно пользователя. Затем пользователь может прокрутить остальную часть сайта.

В настоящее время, я имею его работая с:

стиль CSS:

jumbotron { height: 100vh;}

HTML:

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

... rest of site ...

но я хочу сделать так, чтобы мой сайт был максимально надежным, и хочу использовать более распространенный способ.

2 ответа

  1. То, что вам нужно сделать, это дать каждому родителю jumbotronдо htmlCSS свойства 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>тега .

  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;
      }
    

    .fullS_height {
      height: 100vh;
      }
    <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>