Простейший макет, проблемы с height

m2141 · June 8, 2012

Т.к. в соседнем разделе не удалось мне решить мой вопрос, решила начать с нуля и посмотреть, где возникает проблема.

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

Вот собственно оно http://jsfiddle.net/bfTAC/

Интересно, что в Opera все отлично выглядит как надо

А вот в Хроме и Firefix'е - что попало

Если глянуть для интереса "инспектором" в Firefox, вот что говорит

Получается "контейнер" 100%, но почему то всего 220px. Хотя с body там же все нормально - 100% и 720px на весь экран.

Что я делаю не так? Уже тупняк какой-то начался, тяжело абстрагироваться

Modestes · June 8, 2012

height:auto !important; лишнее

для html еще задайте min-height:100%;

NeoXidizer · June 8, 2012

Посмотрим ваш CSS код.

html, body, form
{
    margin: 0;
    padding: 0;
}

html
{
    height:100%;
}

body
{
    height:auto !important;
    height:100%;
    min-height:100%;
    min-width:760px;
}

#container
{
    background: #ccc;
    width: 100%;
    margin: auto;
    min-height: 100%;
    height: 100%;
    overflow: auto;
}

#header
{
    height: 100px;
    background: #3366FF;
}

#content 
{
    background: #CC33FF;
}

#antifooter
{
    height: 100px;
    background: #000;
}

#footer
{
    background: #B88A00;
    height: 100px;
    margin-top: -100px;
}?

Первая ошибка - вы задаете элементам свойства, которые уже заданы по умолчанию или ничего, по своей сути, не изменяют при данных условиях. Например width: 100%; margin: auto; overflow: auto; и т.д.

Изучите, какие CSS свойства применяются по умолчанию, и избавьте себя от необходимости явно их задавать.

Вторая ошибка - вы назначаете одно и тоже свойство одному элементу. Давайте подумаем, какое из этих свойств будет применено

body
{
    height:auto !important;
    height:100%;
    min-height:100%;
    min-width:760px;
}

применяется то правило, которое было задано последним, либо с пометкой !important, значит height:100%;, согласно вашему коду, является лишним.

Хотя, чтобы ваш макет заработал, нужно как раз убрать "height:auto !important", как это сказано ниже, а height:100%; оставить

Третья ошибка - не использовать HTML5. Браузеры уже достаточно давно принудительно рендерят страницу с использованием HTML5 парсера, и отучить их от этого нельзя. Следовательно, код можно упростить:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="new.css">
    </head>

    <body>
        <div id="container">
            <div id="header">
                HEADER
            </div>
            <div id="content">
                CONTENT
            </div>
            <div id="antifooter"></div>
        </div>
        <div id="footer">
            FOOTER
        </div>
    </body>
</html>
?

а так же рекомендуется заменить <div id="header></div> на <header></header>, но это уже ваше дело. (так как новые HTML5 теги не поддерживают старые IE, а для поддержки нужно подключать на страницу скрипт)

Четвертая ошибка - попытка изобрести велосипед или пытаться реализовать "вредный совет". Существует куча готовых решений, как растянуть контент страницы на всю высоту окна браузера. Воспользуйтесь одним из них, например: http://jsfiddle.net/kUBAT/ посмотреть результат: http://jsfiddle.net/kUBAT/embedded/result/ (решение было подогнано под ваш код)

проверил на кроссбраузерность, работает в последних Google Chrome, Safari, Opera, Firefox, IE8+, возможно и в более ранних версиях, возможности проверить нет.

Можно найти полностью кроссбраузерное решение, вплодь до IE6 (но надо ли?)

P.S. не сверяйтесь первоначально по опере, в ней слишком много багов, чтобы она была эталоном. Используйте Google Chrome, либо Firefox (всегда последних версий)

Edited June 8, 2012 by NeoXidizer

troll · June 8, 2012

Давайте обратимся к инспектору и узнаем, какое из этих свойств будет применено
применяется то правило, которое было задано последним, значит height:100%;.

В инспекторе ошибка, на самом деле применится height: auto !important; (из-за !important).

Первая ошибка - вы задаете элементам свойства, которые уже заданы по умолчанию. Например width: 100%; margin: auto; overflow: auto; и т.д.

Начальное значение свойства width - auto, overflow - visible.

Edited June 8, 2012 by troll

NeoXidizer · June 8, 2012

В таком случае извиняюсь и отправляю баг репорт

NeoXidizer · June 8, 2012

Первая ошибка - вы задаете элементам свойства, которые уже заданы по умолчанию. Например width: 100%; margin: auto; overflow: auto; и т.д.
Начальное значение свойства width - auto, overflow - visible.

нwidth:100%, в данном случае, не сыграет абсолютно никакой роли, как и oveflow, поэтому не вижу смысла их указывать

hedgehog · June 8, 2012

Интересно, что в Opera все отлично выглядит как надо

Потому что только в опере min-height:100% у родителя передается потомку, у которого задано height:100%

m2141 · June 8, 2012

Спасибо всем!

Все понятно теперь, с этим height: auto !important. Проблемы были от непонимания...

На самом деле я занимаюсь под Битрикс и они в своем основном шаблоне так делают:

html, body, form
{
	margin: 0;
	padding: 0;
}

html
{
	height:100%;
}

body
{
	height:auto !important;
	height:100%;
	min-height:100%;
	min-width:760px;

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

Как раз в основном использую Firefox, но тут уже в качестве эксперимента одновременно в 4 браузерах проверяла.

Остальные советы постараюсь разобрать .

Четвертая ошибка - попытка изобрести велосипед или пытаться реализовать "вредный совет". Существует куча готовых решений, как растянуть контент страницы на всю высоту окна браузера. Воспользуйтесь одним из них, например: http://jsfiddle.net/kUBAT/ посмотреть результат: http://jsfiddle.net/...mbedded/result/ (решение было подогнано под ваш код)
проверил на кроссбраузерность, работает в последних Google Chrome, Safari, Opera, Firefox, IE8+, возможно и в более ранних версиях, возможности проверить нет.
Можно найти полностью кроссбраузерное решение, вплодь до IE6 (но надо ли?)

Что-то не поняла... Вроде ведь так и хотела сделать по сути самой идеи, если бы не намудрила с заданием высоты всему подряд.

Или не вижу чего-то?)

Edited June 8, 2012 by m2141

Sign In

Простейший макет, проблемы с height

Question

m2141

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

Modestes

Link to comment

Share on other sites

NeoXidizer

Link to comment

Share on other sites

troll

Link to comment

Share on other sites

NeoXidizer

Link to comment

Share on other sites

NeoXidizer

Link to comment

Share on other sites

hedgehog

Link to comment

Share on other sites

m2141

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information