Div внизу окна и адаптируемой высотой div

Question

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

Это лучше всего проиллюстрировать на картинке:

div layout http://img401.imageshack.us/img401/3209/divs.png

зеленый ДИВ всегда будет ставить себя в нижней части окна, и оранжевый DIV будет заполнить этот пробел. Когда окно меньше, как в изображении правой руки, оранжевый div будет меньше и будет прокручиваться.

Зеленый div может быть переключен. Иногда зеленый div будет иметь display: none, а затем оранжевый div будет растягиваться на дно. Когда зеленый div снова получит display: block, он снова будет выглядеть как картинка.

Он должен работать в IE6.

До сих пор я могу получить зеленый ДИВ идти ко дну:

position: absolute; 
bottom: 0; 

Но я не знаю, как получить оранжевый DIV, чтобы делать то, что я хочу.

Answer 1

вы посмотрите на "Изучение Footers" в A List Apart может

http://www.alistapart.com/articles/footers/

надеюсь, что это помогает, Синан

EDIT: (чистый способ CSS)

разметка:

<div class="non-footer">Your content goes here.</div> 
<div class="footer">Here is for footer content.</div> 

Вашего CSS:

body, html, .non-footer { 
    height: 100%; 
    min-height: 100%; 
    width: 100%; 
} 
.footer { 
    height: 150px; 
    margin-top: -150px; 
    width: 100%; 
} 

я могу отсутствовать некоторые детали, но это должно работать, и это дает основную идею трюка.

Синан.

Answer 2

вы должны использовать фиксированный вместо абсолютного

position: fixed; 
bottom: 0; 

Answer 3

попробовать это: установить положение оранжевого Дива относительного с нижней маржинальной = высотой зеленого DIV с переполнением: авто

Я думаю, что ваш оранжевый ДИВ будет прокручивать, если он становится больше, тем пространством между белым и зеленым div. , чтобы решить вашу проблему фона, вы можете легко установить оранжевый цвет фона. Таким образом, для пользователя никогда не будет видно, что ваш оранжевый div на самом деле меньше, чем пробел между белыми и зелеными divs

Answer 4

Я не думаю, что это возможно без разработки размера центра div, используя Javascript.

CSS позиционирование в основном течет сверху вниз, так, чтобы получить DIV, чтобы вставить в нижней части страницы, вы должны принять его из потока страницы, используя позицию: абсолютная (или позиция: фиксированная)

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

Answer 5

Проверьте это. Поместите это в голову:

<script> 
    var int=self.setInterval(function(){clock()},100); 

    function clock() 
    { 
     var s = document.getElementById("Footer"); 
     s.style.position = "Fixed"; 
     s.style.bottom = "0px"; 
     s.style.margin = "0px"; 
     s.style.height = "20px"; 
     s.style.width = "30px"; 
    } 

    window.onload=clock 
</script> 

HTML-:

<div id="Footer"></div>