CSS - Создание div потребляет все свободное пространство

Все,

У меня есть страница, которая, как предполагается, занимает только доступное пространство экрана в браузере.

У меня есть "верхняя панель" и "нижняя панель", каждая из которых фиксирована в верхней и нижней частях страницы. Я хочу иметь div, который будет потреблять (брать) оставшееся пространство между двумя столбцами, упомянутыми выше.

Самое главное, что средний div не перекрывается верхним и нижним барами. Возможно ли это с помощью CSS или мне нужно использовать js.

Кроме того, если я перейду к js, учитывая, что браузер загружает CSS сначала перед js-кодом, как это работает, используя js для позиционирования по центру?

Большое спасибо,

Ответ 1

Вы можете использовать позиции relative и absolute. Вот пример:

CSS

   html,body,#wrapper {
        height:100%;
        margin:0;
        padding:0;
    }
    #wrapper {
        position:relative;
    }

    #top, #middle, #bottom {
        position:absolute;
    }

    #top {
        height:50px;
        width:100%;
        background:grey;
    }
    #middle {
        top:50px;
        bottom:50px;
        width:100%;
        background:black;
    }
    #bottom {
        bottom:0;
        height:50px;
        width:100%;
        background:grey;
    }

HTML

<div id="wrapper">
    <div id="top"></div>
    <div id="middle"></div>
    <div id="bottom"></div>
</div>

Демо: http://jsfiddle.net/jz4rb/4

Ответ 2

Эта демонстрация работает для меня в Chrome12, но YMMV в зависимости от того, какие браузеры вам необходимо поддерживать. Например, position:fixed работает некорректно в IE6.

Ответ 3

Используйте абсолютное позиционирование в теге body. position:absolute с нулевым верхом и снизу будет "растягивать" тело того же размера, что и окно браузера. В качестве альтернативы, установка height: 100% также работает, но я помню, что она работает wierd для некоторых старых браузеров.

Затем используйте абсолютное позиционирование в центральном div с достаточным смещением верхнего и нижнего уровня, чтобы избежать ваших верхних и нижних колонтитулов. Строка заголовка абсолютно позиционируется с помощью top, и фоттер абсолютно расположен с bottom.

Примечание. Это не будет работать в мобильных браузерах. Вам нужно будет использовать JS для получения высоты окна и вручную установить высоту центрального div.