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

Question

Я обычно выкладываю свою структуру примерно так:

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

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

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

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

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

пример

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

пример

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

Answer 1

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

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

Давайте начнем с созданных мной div'ов:

<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, и оно работало во всех без каких-либо проблем.

Answer 2

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

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

Answer 3

Ну, вот что я закончил с 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, но, к счастью, это даст вам хороший старт.

Answer 4

Забудьте 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;
}

Answer 5

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

#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; */
}

Answer 6

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

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

Answer 7

Вот что происходит: вы установили для html & body высоту 100%, но это 100% высота окна просмотра, а не документа. Так как высота #all установлена ​​на 100%, она установлена ​​на 100% от высоты родителя, которая является телом, которое установлено на 100% от высоты области просмотра. Все наследует высоту окна просмотра.

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

Подробнее здесь: http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

Answer 8

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

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

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

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

Мой комментарий на голосование:

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

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