Полнофункциональный фон с Twitter Bootstrap

Я пытаюсь работать над новым проектом с использованием инфраструктуры Twitter Bootstrap, но у меня проблема. Я хочу полный фон, но фон, кажется, ограничен высотой контейнера div. вот код HTML/CSS:

<!doctype html>
<html lang="en">
    <head>
        <meta charset='UTF-8'>
        <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
        <link rel="stylesheet" href="#" onclick="location.href='http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css'; return false;">
        <title>Bootstrap Issue</title>
        <style>
          body { background: black; }
          .container { background: white; }
        </style>
    </head>
    <body>
        <div class="container">
          <h1> Hello, World!</h1>
        </div>
    </body>

</html>

Как я могу заставить тело занять весь экран?

Ответ 1

Вам нужно либо добавить это:

html { background: transparent }

Или, вместо этого установите "фон страницы" (background: black) на html, что хорошо делать.

Почему? Внутри Bootstrap есть следующее:

html,body{background-color:#ffffff;}

(помните, что значение по умолчанию background равно transparent)

Подробнее о том, почему это важно, см.: В чем разница между применением правил CSS для html по сравнению с телом?

Обратите внимание, что это больше не проблема с Bootstrap 3 +.

Ответ 2

Установите высоту html и body на 100% в CSS.

html, body { height: 100%; }

Тогда это должно сработать. Проблема в том, что высота тела автоматически рассчитывается как высота содержимого, а не высота всего экрана.

Ответ 3

/* здесь чисто CSS-решение */

<style type="text/css">
      html, body {
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
      }

      #full-screen-background-image {
        z-index: -999;
        min-height: 100%;
        min-width: 1024px;
        width: 100%;
        height: auto;
        position: fixed;
        top: 0;
        left: 0;
      }

      #wrapper {
        position: relative;
        width: 800px;
        min-height: 400px;
        margin: 100px auto;
        color: #333;
      }

      a:link, a:visited, a:hover {
        color: #333;
        font-style: italic;
      }

      a.to-top:link,
      a.to-top:visited, 
      a.to-top:hover {
        margin-top: 1000px;
        display: block;
        font-weight: bold;
        padding-bottom: 30px;
        font-size: 30px;
      }

    </style>
    <body>
  <img src="/background.jpg" id="full-screen-background-image" /> 
  <div id="wrapper">
    <p>Content goes here...</p>
  </div>
</body>

Ответ 4

<style>
      body { background: url(background.png); }
      .container { background: ; }
</style>

это работает для фонового изображения, если вы хотите его

Ответ 5

лучшим решением будет

.content{
    background-color:red;
    height: 100%;
    min-height: 100vh;
}

он автоматически принимает высоту veiwport (vh) в бутстрапе.