CSS жидкий макет, где div нижнего колонтитула соответствует размеру страницы и остается внизу

Question

Я работаю над следующей структурой макета:

<div id="wrapper">
    <div id="header"></div>
    <div id="pageContainer"></div>
    <div id="footer"></div>
</div>

С помощью следующего CSS я установил нижний колонтитул внизу страницы:

#wrapper {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#pageContainer {
   padding:10px;
   padding-bottom:60px;
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;
   background:#6cf;
}

Если содержимое в div "pageContainer" невелико, я не хочу показывать полосы прокрутки в div, но прикрепляю нижний колонтитул к нижней части div "pageContainer" (справа, а не нижний колонтитул всегда находится внизу окна просмотра)

Если содержимое div-элемента pageContainer длинное, мне нужно, чтобы нижний колонтитул оставался видимым в области просмотра (внизу) и отображал полосы прокрутки в div-элементе pageContainer.

Как мне это сделать? Есть идеи? Спасибо!

PS: мне нужно решение, которое не использует JS.

Answer 1

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

Конечно, вы не можете достичь этого без JavaScript.

Но решение, при котором нижний колонтитул всегда находится внизу области просмотра, является довольно распространенным и легко сделать без JavaScript. Если вы еще не знаете, как это сделать:

#header, #pageContainer, #footer{
    position:fixed;
    left:0px;
    right:0px;
}
#header{
    top:0px;
    height:100px;
    background:#ff0;
}
#pageContainer {
    top:100px;
    bottom:60px;
    overflow:auto;
}
#footer {
    bottom:0px;
    width:100%;
    height:60px;
    background:#6cf;
}

Answer 2

Я думаю, вы могли бы сделать что-то вроде этого:

#header {
   background:#ff0;
   padding:10px;
   height: 15%;
}
#pageContainer {
   padding:10px;
   max-height: 70%;
   overflow: auto;
}
#footer {
   bottom:0;
   width:100%;
   height:15%;
   background:#6cf;
}​

Обратите внимание, что вам нужно указать ваши высоты в процентах. Также заполнение может быть проблемой.