Вопросы Теги

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

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

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

HTML:

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

23
задан Glorfindel 11 June 2019 в 13:06
поделиться

7 ответов

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

3
ответ дан 29 November 2019 в 01:07
поделиться
-

Вы пытались настроить так, как это? 

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

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

1
ответ дан 29 November 2019 в 01:07
поделиться

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

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

0
ответ дан 29 November 2019 в 01:07
поделиться

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

0
ответ дан 29 November 2019 в 01:07
поделиться

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

Я думаю, вы должны добавить положение : абсолютное; свойство HTML, Body селектор.

-1
ответ дан 29 November 2019 в 01:07
поделиться

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

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

<script type="text/javascript">
var height = $(document.body).getHeight();
document.write('<div id="yourdiv" style="height:'+height+'px;width:100%;"></div>');
</script>
1
ответ дан 29 November 2019 в 01:07
поделиться

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

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

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

Попробуйте...

старая нерабочая версия
Попробовали ли вы #gradient и #holes следующее? 
#gradient {
  height:auto!important;
  height:100%;
  min-height:100%;
  ..
  ..
}
#holes{
  height:auto!important;
  height:100%;
  min-height:100%;
  ..
  ..
}
3
ответ дан 29 November 2019 в 01:07
поделиться