Высота 100% для нескольких divs

Обычно у меня в структуре есть что-то вроде этого:

<div id="all">
  <div id="page">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
  </div>
</div>

В тех случаях, когда тело будет удерживать фоновый рисунок, "все" будет удерживать кнопку "dropshadow" для страницы вверх и вниз, а "страница" может часто иметь и повторяющийся фон y.

Я испробовал варианты использования свойств высоты/мин-высоты css:

html, body {
    height:100%;
    ...
}
#all {
    height:100%; 
    min-height:100%; 
}
#page {
    height:100%; 
    min-height:100%;
    height:auto !important;
}

Похоже, если я удаляю высоту: auto из "all", то кажется, что он работает, пока вы не прокрутите, затем после прокрутки фон для всех исчезает

пример

Однако, если я сохраняю высоту: auto там, то я получаю проблему фона для страницы, не работающей

пример

Надеюсь, кто-то знает, что исправить?

ОТВЕТЫ

Ответ 1

Ну, вот что я получил для CSS:

html, body {
    height:100%; /* IE6: treaded as min-height*/
    margin: 0;
    padding: 0;
}
body {
    margin: 0;
    padding: 0;
    color: #494949;
    text-align: center;
    background-color: #3f91a7;
    background-image: url(images/bg_body.jpg);
    background-repeat: repeat-x;
    background-position: center top;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
#all {
    margin: 0px;
    padding: 0px;
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */
    height:auto !important;
    background-image: url(images/bg_all.png);
    background-repeat: repeat-y;
    background-position: center top;
    overflow: hidden;
}
#page {
    width: 993px;
    padding: 0 0 10000px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: -10000px;
    margin-left: auto;
    text-align: left;
    background-color: #FFF;
    background-image: url(images/bg_page.jpg);
    background-position: center top;
    background-repeat: repeat-y;
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */
    height:auto !important;
}
#header, #footer {
    text-align: center;
    font-size: 16px;
    padding: 20px;
}
#content {
    padding: 25px;
}

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

Ответ 2

Я бы просто перевернул местоположение вашей div # all и div # страницы...

<div id="page">
  <div id="all">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
  </div>
</div>

Ответ 3

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

Была та же проблема, фон 1 полный экран, адаптивный и полностью ниже всего остального, а другой повторяющийся (-y) фон номер 2 должен идти сверху, но не прокручиваться из поля зрения, потому что он был установлен, чтобы следить за высотой окно, которое было присвоено конкретному div, который содержит фон 2.

Начнем с созданных divs:

<div id="full_background">
    <img src="images/bkg_main.jpg" alt="" />
    <div id="absolute">Contains background set to repeat-y</div>
    <div id="content">Contains the content</div>
</div>

css выглядит следующим образом:

* { margin: 0px; padding: 0px; }
html { height: 100%; }
body { height: 100%; }

#full_background { width: 100%; min-height: 100%; position: relative; float: left; }
#full_background>img { position: absolute; top: 0; left: 0; position: fixed; width: 100%; z-index: 1; display: block; }
#full_background>div { position: relative; z-index: 2; }

#absolute { position: fixed !important; left: 0; width: 100%; height: 100%; background: url("../images/bkg2.png") top left repeat-y; }

#content { width: 290px; margin-left: 20px; padding: 30px; line-height: 1.7em; font-family: 'Lato', sans-serif; position: relative; float: left; }

Во-первых, я добавил полный экран и изменил размер фонового изображения на свой сайт (используя div full_background и тег img), используя следующее решение (очень простое решение css, которое работает как шарм в каждом браузере и большинстве старых версий вниз например, IE7) - http://www.webdeveloper.com/forum/archive/index.php/t-256494.html > см. последний ответ aj_nsc

Далее, используя следующий метод jQuery - http://nicholasbarger.com/2011/08/04/jquery-makes-100-height-so-much-easier/ - я создал div с id = absolute, которому задана та же высота, что и в окне браузера (также при изменении размера). Я разместил здесь свой повторяющийся (-y) номер 2. Установите этот div в положение: fixed, и он останется включенным, когда прокручивается div с содержимым.

Затем под этим div вы поместите div с вашим контентом, который свободно расширяется вниз за окном браузера.

При прокрутке оба фонов будут постоянно заполнять всю область окна браузера (вертикально) и оставаться на месте, при этом содержимое прокручивается вверх и вниз над ними. Таким образом, при изменении размера вы также убедитесь, что оба фона постоянно заполняют всю фоновую область.

Я тестировал это решение в CH, FF, IE7-9 и Safari, и он работал во всех них без каких-либо проблем.

Ответ 4

Вы пробовали:

html,
body {
     margin: 0;
     padding: 0;
     height: 100%;
}
#all {
     min-height: 100%;
}

? Только для IE 6 вы должны установить height: 100%; для #all (потому что он интерпретирует это в основном как min-height (в результате ошибки). Поскольку IE6 не понимает атрибут min-height, высота эффективно становится заменой для минимальной высоты).

Если вы установили height: 100%; для других браузеров, они будут воспринимать его как 100% высоты окна просмотра, а не 100% страницы, поэтому прокрутка будет работать неправильно.

Мой комментарий к downvote:

Стало ясно, что мой ответ не решает всей проблемы. То, что мы имеем здесь, кажется довольно сложным делом - по крайней мере, никто, кажется, не нашел ответа еще? Я даже изучил превосходную (немецкую) книгу Инго Чао, которая приходит к такому же выводу: установка родительской высоты не будет работать, а установка высоты ребенка не будет работать, если родительская высота не была задана явно, но динамически по размеру содержимого.

Но мой ответ все-таки помог бы немного ограничить возможности - потому что установка height на #all, скорее всего, не будет работать ни на одном браузере, кроме IE 6. Если вы не согласны, отправьте комментарий, потому что в этом случае, Я также хотел бы узнать больше об этом.

Ответ 5

Вот что происходит: вы установили для html и body высоту 100%, но это 100% - это высота окна просмотра, а не документа. Поскольку высота #all установлена ​​равной 100%, она установлена ​​на 100% от родительской высоты, которая, как оказалось, является телом, которая установлена ​​на уровне 100% высоты окна просмотра. Все, наследующие высоту окна просмотра.

Способ устранения этой проблемы на самом деле аналогичен тому, как вы исправляете очищающие поплавки с внешним контейнером. Все, что вам нужно сделать, это положить overflow:auto; на #all. Вам даже не нужны объявления высоты для любых других элементов, и вы можете устранить либо div #all, либо #page.

Дополнительная информация здесь: http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

Ответ 6

Это сработало для меня:

#page {
    width: 993px;
    padding: 0px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    text-align: left;
    background-color: #FFF;
    background-image: url(http://jeffkilroy.com/hosted/layout1/images/bg_page.jpg);
    background-position: center top;
    background-repeat: repeat-y;
    /* height:100%;  IE6: treaded as min-height*/
    height: expression(document.body.offsetHeight); /* sets min-height for IE */
    overflow: auto;
    min-height:100%; /* real browsers */
    /* height:auto !important; */
}

Ответ 7

Забудьте о 100% на div, попробуйте переместить фоновое изображение в элемент html и полный размер высоты тела.

html {
    height:100%;
    background-color: blue;
}
body {
    margin: auto auto;
    padding: 0;
    color: #494949;
    /*min-height: 100%; */
    height:100%; /*for ie6*/
    border-left:solid 2px red;
    border-right:solid 2px red;
    background-color:#fff;
    width: 960px;
}

Ответ 8

Вы пробовали это:

function getWindowHeight() {
                var windowHeight = 0;
                if (typeof(window.innerHeight) == 'number') {
                    windowHeight = window.innerHeight;
                }
                else {
                    if (document.documentElement && document.documentElement.clientHeight) {
                        windowHeight = document.documentElement.clientHeight;
                    }
                    else {
                        if (document.body && document.body.clientHeight) {
                            windowHeight = document.body.clientHeight;
                        }
                    }
                }
                return windowHeight;
            }


window.onload = init;



 function init(){
 document.getElementByID("all").style.height = getWindowHeight() + "px";

    }

Или поставьте page вместо all