Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > div занял все свободное место

Автор: z006 17.2.2011, 00:34

сижу и в шоке смотрю на монитор.и ощущаю что это пустяк,я такое давно решал,а тупо мысль не идет. smile

задача такова:
3 горизонтальных дива,один под другим.у всех ширина 100%
верхний вверху прижат и забыли про него.нижний должен быть прижат к низу.тоже решаемо легко.но!средний должен занимать все пространство между верхним и нижним при любом размере экрана(не катит залезать под любой из них,в нем будет контент на всю высоту).в него потом будет помещаться контент,высота которого будет подгоняться под этот див.иными словами жмем контент под экран,а не тянем экран под контент.
как сие решить? smile

Автор: ayax2005 17.2.2011, 09:30

Быстренько накидал в файрбаге

Код


<html style="margin: 0pt; padding: 0pt;">
    <head></head>
    <body style="margin: 0pt; padding: 0pt; overflow: hidden;">
        <div id="id1" style="width: 100%; background-color: rgb(255, 0, 0); float: left;">
            header
        </div>
        <div id="id2" style="height: 100%; background-color: rgb(0, 255, 0); float: left; width: 100%;">
            middle
        </div>
        <div id="id3" style="bottom: 0pt; width: 100%; background-color: rgb(0, 0, 255); position: absolute;">
            footer
        </div>
    </body>
</html>

Раз уж вы собираетесь ужимать контент по экрану, то overflow в body не должен вас смущать.