Верстка в DIV - HTML и CSS

Suamo · 10.11.2010, 01:45

Добрый день!

В моем коде высота верхнего и нижнего блоков должна быть статическая, а высота центрального должна забирать все оставшееся место в блоке, оборачивающем эти три блока.

У меня ничего не выходит. Сумма высот трех внутренних блоков в итоге получается больше высоты основного блока и вылазит из него.

Вот. Прошу помощи :)

Код HTML:

<html>
<head>
    <style type="text/css">
        div {
            border:1px solid gray; opacity:0.9;
        }

        #mainDiv {
            border:2px solid black; height: 80%; padding:10px;
        }

        #header {  
            height:30px; background-color:cornflowerblue;
        }

        #center {  
            height:100%; background-color:aquamarine;
        }

        #footer {  
            height:30px; background-color:coral;
        }
    </style>
</head>
<body>
<div id="mainDiv">
    <div id="header">header</div>
    <div id="center">center</div>
    <div id="footer">footer</div>
</div>
</body>
</html>

Виталий Желтяков · 10.11.2010, 09:52

Не получиться.
Если хотите, чтобы везде смотрелось, как надо (даже в IE6), то:
- делаете верстку в таблицах;
- подключаете doctype;
- задаёте высоту таблицы, как 100%;
- задаёте строки нужного размера.

WhiteSpirit · 10.11.2010, 11:24

Попробуй вот так:

Код HTML:

#header {  
            height:10%; min-height:30px; background-color:cornflowerblue;
        }

        #center {  
            height:80%; background-color:aquamarine;
        }

        #footer {  
            height:10%; min-height:30px; background-color:coral;

Виталий Желтяков · 10.11.2010, 13:16

Цитата:

Сообщение от WhiteSpirit

Попробуй вот так:

Код HTML:

#header {  
            height:10%; min-height:30px; background-color:cornflowerblue;
        }

        #center {  
            height:80%; background-color:aquamarine;
        }

        #footer {  
            height:10%; min-height:30px; background-color:coral;

В IE корректно это работать не будет.

WhiteSpirit · 10.11.2010, 14:07

В Опере и лисе всё нормально.

Suamo · 10.11.2010, 18:28

Супер! Немного едет в хроме если сильно уменьшить окно.

Так что в более мелких частях страницы (я их аджаксом подгружаю) буду использовать таблицы. В остальных блоки с минимальной высотой.

Спасибо, большое за решения!

10.11.2010, 01:45	#1
Suamo Новичок Джуниор Регистрация: 10.11.2010 Сообщений: 2	Верстка в DIV Добрый день! В моем коде высота верхнего и нижнего блоков должна быть статическая, а высота центрального должна забирать все оставшееся место в блоке, оборачивающем эти три блока. У меня ничего не выходит. Сумма высот трех внутренних блоков в итоге получается больше высоты основного блока и вылазит из него. Вот. Прошу помощи :) Код HTML: <html> <head> <style type="text/css"> div { border:1px solid gray; opacity:0.9; } #mainDiv { border:2px solid black; height: 80%; padding:10px; } #header { height:30px; background-color:cornflowerblue; } #center { height:100%; background-color:aquamarine; } #footer { height:30px; background-color:coral; } </style> </head> <body> <div id="mainDiv"> <div id="header">header</div> <div id="center">center</div> <div id="footer">footer</div> </div> </body> </html>

10.11.2010, 11:24	#3
WhiteSpirit Пользователь Регистрация: 28.05.2010 Сообщений: 82	Попробуй вот так: Код HTML: #header { height:10%; min-height:30px; background-color:cornflowerblue; } #center { height:80%; background-color:aquamarine; } #footer { height:10%; min-height:30px; background-color:coral;

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
div тег как нижний слой для второго div тега	dadli	HTML и CSS	2	30.07.2010 01:12
Позиционирование двух плавающих DIV внутри одного DIV	allocator	HTML и CSS	5	22.07.2009 13:48
Верстка на DIV	darewangog	HTML и CSS	1	17.07.2009 11:27
div-верстка: контент выше хедера	wall66	HTML и CSS	9	15.02.2009 08:57
Растягивающийся DIV и толкающий в низ следующий DIV	Суриков	HTML и CSS	6	29.08.2008 12:01

10.11.2010, 09:52	#2
Виталий Желтяков Старожил Регистрация: 19.04.2010 Сообщений: 2,702	Не получиться. Если хотите, чтобы везде смотрелось, как надо (даже в IE6), то: - делаете верстку в таблицах; - подключаете doctype; - задаёте высоту таблицы, как 100%; - задаёте строки нужного размера.

10.11.2010, 14:07	#5
WhiteSpirit Пользователь Регистрация: 28.05.2010 Сообщений: 82	В Опере и лисе всё нормально.

10.11.2010, 18:28	#6
Suamo Новичок Джуниор Регистрация: 10.11.2010 Сообщений: 2	Супер! Немного едет в хроме если сильно уменьшить окно. Так что в более мелких частях страницы (я их аджаксом подгружаю) буду использовать таблицы. В остальных блоки с минимальной высотой. Спасибо, большое за решения!