Установите высоту 100% на абсолютный div

У меня возникла проблема с наложением 100% высоты div. Я мог бы использовать фиксированную позицию для решения обложки, но это не совсем то, что я хочу, потому что вы должны иметь возможность прокручивать "обложку" > , чтобы люди с более низким разрешением, чем мои, могли видеть весь контент.

Пример кода:

HTML

<body>
<div>Overlay example text</div>
</body>

CSS

body {
    float: left;
    height: 3000px;
    width: 100%;
}
body div {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: yellow;
}

Проблема: Высота div 100% содержит только 100% веб-браузера/видового экрана, но я хочу, чтобы он охватывал все тело.

Заранее спасибо:)

Ответ 1

http://jsbin.com/ubalax/1/edit. Вы можете увидеть результаты здесь

body {
    position: relative;
    float: left;
    height: 3000px;
    width: 100%;
}
body div {
    position: absolute;
    height: 100%;
    width: 100%;
    top:0;
    left:0;
    background-color: yellow;
}

Ответ 2

попробуйте добавить

position:relative

к вашим стилям тела. Всякий раз, когда вы позиционируете что-либо абсолютно, вам нужно, чтобы один из родительских контейнеров располагался относительно друг друга, так как это сделает элемент позиционированным абсолютным относительно родительского контейнера, который является относительным.

Поскольку у вас не было относительных элементов, css не будет знать, что такое div, и поэтому не будет знать, что взять 100% высоты

Ответ 3

Несколько ответов дали решение с высотой и шириной 100%, но я рекомендую не использовать процент в css, использовать верхнее/нижнее и левое/правое позиционирование.

Это лучший подход, позволяющий вам контролировать маржу.

Вот код:

body {
    position: relative;
    height: 3000px;
}
body div {

    top:0px;
    bottom: 0px;
    right: 0px;
    left:0px;
    background-color: yellow;
    position: absolute;
}

Ответ 4

Полная растяжка (горизонтальная/вертикальная)

Принятый ответ велик. Просто хочу указать на некоторые вещи для других, приезжающих сюда. Поля в этих случаях не нужны. Если oyu хочет иметь центрированный макет с определенной "маржей", вы можете добавить их вправо и влево, например:

.stretched {
  position: absolute;
  right: 50px;  top: 0;  bottom: 0; left: 50px;
  margin: auto;
}

Это чрезвычайно полезно.

Центрирование div (по вертикали/по горизонтали)

В качестве бонуса абсолютное центрирование, которое можно использовать для получения чрезвычайно простого центрирования:

.centered {
  height: 100px;  width: 100px;  
  right: 0;  top: 0;  bottom: 0; left: 0;
  margin: auto;
  position: absolute;
}

Ответ 5

Вместо использования body с помощью html работал у меня:

html {
   min-height:100%;
   position: relative;
}

div {
   position: absolute;

   top: 0px;
   bottom: 0px;
   right: 0px;
   left: 0px;
}

Ответ 6

Другое решение без какой-либо высоты, но при этом заполняет 100% доступную высоту. Проверьте это, например, в кодефене. http://codepen.io/gauravshankar/pen/PqoLLZ

Для этого html и body должны иметь высоту 100%. Эта высота равна высоте окна просмотра.

Сделайте внутреннюю позицию div абсолютной и дайте верхнюю и нижнюю 0. Это заполняет div до доступной высоты. (высота равна телу.)

html-код:

<head></head>

<body>
  <div></div>
</body>

</html>

Код css:

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  position: relative;
}

html {
  background-color: red;
}

body {
  background-color: green;
}

body> div {
  position: absolute;
  background-color: teal;
  width: 300px;
  top: 0;
  bottom: 0;
}