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

Вот что происходит: вы установили для 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/

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

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

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

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

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

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

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

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

Но мой ответ все же может помочь немного ограничить возможности - потому что установка height на #all, скорее всего, не будет работать ни в одном браузере, кроме IE 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";

    }   

Или поместите страницу вместо all

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

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

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

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