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

Question

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

Это лучше всего иллюстрируется рисунком:

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

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

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

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

Пока что я могу заставить зеленый div перейти на дно по:

position: absolute;
bottom: 0;

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

Answer 1

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

position: fixed;
bottom: 0;

Answer 2

вы можете взглянуть на "Изучение нижних колонтитулов" в A List Apart,

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

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

РЕДАКТИРОВАТЬ: (чистый способ 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 3

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

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

Answer 4

Вы можете использовать следующее решение, чтобы оранжевый div сделал то, что вы хотите:

if ( ( $('.container-with-footer').height() ) < ( $(window).height() ) ) {
    $('footer').css({
        "position":"absolute",
        "left":"0",
        "right":"0",
        "bottom":"0"
    })
}

Answer 5

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

Позиционирование CSS в основном происходит сверху вниз, поэтому, чтобы div прикреплялся к нижней части страницы, вам нужно вывести его из потока страницы, используя position: absolute (или position: fixed)

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

Answer 6

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

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