Абсолютная высота DIV 100%

Я работал над этим в течение последних нескольких часов, и поиск в Интернете и стековый поток не получили большой поддержки. Как сделать так, чтобы #gradient и #holes заполняли всю страницу?

Я использовал функцию проверки элемента в Safari, и когда я выделяю элемент body, он не заполняет все окно.

HTML:

<body>

    <div id="gradient"></div>
    <div id="holes"></div>

    <div id="header">Header Text</div>
</body>

CSS:

html, body {
    height:100%;

    margin:0;
    padding:0;
}

body {
    background-image:url(../Images/Tile.png);
    background-color:#7D7D7D;
    background-repeat:repeat;
}

#gradient {
    background-image:url(../Images/Background.png);
    background-repeat:repeat-x;

    position:absolute;
    top:0px;
    left:0px;
    height:100%;
    right:0px;
}

#holes {
    background-image:url(../Images/Holes.png);
    background-repeat:repeat;

    position:absolute;
    top:2px;
    left:2px;
    height:100%;
    right:0px;
}

#header {
    background-image:url(../Images/Header.png);
    background-repeat:repeat-x;

    position:absolute;
    top:0px;
    left:0px;
    width:100%;

    padding-top:24px;
    height:49px; /* 73 - padding */

    color:rgb(113, 120, 128);
    font-family:Helvetica, Arial;
    font-weight:bold;
    font-size:24px;
    text-align:center;
    text-shadow:#FFF 0px 1px 0px;
}

Ответы

Ответ 1

Хорошо, мне кажется, что ваш элемент со всем содержимым плавает. Если это тогда, то он не собирается расширять тело, если он не очищен.

Ответ 2

Обратите внимание, что свойство height, указанное в процентах, рассчитанное по отношению к содержащему блоку, которое не обязательно должно быть непосредственным предком - "Содержащий блок для позиционируемого поля устанавливается ближайшим позиционированным предком или, если он не существует, исходный содержащий блок" . Бьюсь об заклад, это то, что происходит в вопросе опросника, поскольку нет позиционного предка (тот, у которого position: установлен либо на relative, либо absolute).

Таким образом, "содержащий блок" разрешает исходный содержащий блок, который соответствует размерам окна просмотра (окна). Установка position:relative в body учитывает высоту body и полностью растягивает абсолютно позиционированное содержимое вдоль body.

Подробнее о содержащем блоке здесь.

Ответ 3

У меня была такая же проблема. Исправлено, изменив положение: абсолютное положение: зафиксировано.

Ответ 4

[обновление]
новый подход
Это должно сделать это.

используя display:table на ваших 2 элементах, он должен это сделать (он работает в моих тестах). (но теперь вам нужно назначить значения ширины.

Однако я не уверен, что вы должны определить вложенные элементы как table-cell и т.д., которые станут неуправляемыми.

Попробуйте хотя бы.

старой нерабочей версии
Пробовали ли вы #gradient и #holes следующие?

#gradient {
  height:auto!important;
  height:100%;
  min-height:100%;
  ..
  ..
}
#holes{
  height:auto!important;
  height:100%;
  min-height:100%;
  ..
  ..
}

Ответ 5

$('div.class').css({'height':(($(document).height()))+'px'});

Ответ 6

Лучший способ - использовать javascript. min-height не поддерживается каждым браузером.

Javascript с использованием прототипа:

<script type="text/javascript">
var height = $(document.body).getHeight();
document.write('<div id="yourdiv" style="height:'+height+'px;width:100%;"></div>');
</script>

Ответ 7

Попробовали ли вы настроить это?

#holes {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Будет растянут элемент, чтобы заполнить всю область страницы

Ответ 8

Я думаю, вы сделали все правильно. Это работает в Chrome (WebKit тоже!) И в IE7/8/Quirks всякий раз, когда вы ставите ширину: 100% на #gradient и #holes, не можете проверить сафари на Mac прямо сейчас (только у вас дома), но теоретически вы должны видеть это должным образом.

Тем не менее, может быть, это вещь типа doctype, попробовать разные?

Ответ 9

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

Ответ 10

Примените стили CSS к #gradient и #holes и поместите script после DIV.

.background-overlay{
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
}

<body>
    <div id="gradient"></div>
    <div id="holes"></div>

    <script type="text/javascript">
        $(document).ready(function() {
            var bodyHeight = $("body").height();
            $('#gradient,#holes').height(bodyHeight);

        })
    </script>


    <div id="header">Header Text</div>

Ответ 11

Если я правильно помню, чтобы иметь возможность указывать позиции контейнерных контейнеров (A) (B1, B2,...), позиция должна быть абсолютной. Ваша позиция контейнера body отсутствует.

Я думаю, вы должны добавить свойство position:absolute; в селектор html,body.