Высота блока 100%

Микель · July 8, 2011

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

Нужен див, с абсолютным позиционированием на 100% ширины и высоты экрана. Область дива должна распространяться и за пределы видимости экрана если контента очень много. Нужен для того, чтобы показывать gif'ку лоадинга, пока страница думает + так же блокировать все элементы управления на странице.

Вот понадергал из разных рецептов.


* {
	border:0;
	font-family: Tahoma, Arial, Verdana;
	font-size:12px;
	margin:0;
	outline:none;
	padding:0;

}

html, body {
	background:#FFFFFF;
	margin:0;
	padding:0;
	height:100%;
	min-height: 100%;
}

* html body { height: 100%; min-height: 100%;}

<div style="background:yellow;width:100%;height:100%;_height: 100%;position:absolute;display:block;text-align:center;" id="loader">
    <h1 style="font-size:30px;margin:100px 0 0 0;">Идет загрузка страницы</h1>
    <img src="img/loading.gif" />
</div>

Edited July 8, 2011 by Микель

amelice · July 8, 2011


* {
	border:0;
	font-family: Tahoma, Arial, Verdana;
	font-size:12px;
	margin:0;
	outline:none;
	padding:0;

}

html, body {
	background:#FFFFFF;
	margin:0;
	padding:0;
	height:100%;
	min-height: 100%;
}

* html body { height: 100%; min-height: 100%;}

<div style="background:yellow;width:100%;height:100%;_height: 100%;position:absolute;display:block;text-align:center;" id="loader">
    <h1 style="font-size:30px;margin:100px 0 0 0;">Идет загрузка страницы</h1>
    <img src="img/loading.gif" />
</div>

Попробуйте:


body {
        background:#FFFFFF;
        margin:0;
        padding:0;
        position:relative;
     }

#loader{  top:0;
          left:0;
          background:yellow;
          width:100%;
	  height:100%;
	  position:absolute;
	  text-align:center;
	}

<div id="loader">
    <h1 style="font-size:30px;margin:100px 0 0 0;">Идет загрузка страницы</h1>
    <img src="img/loading.gif" />
</div>

В ИЕ6 не работает. а в ИЕ7 не проверяла, в ИЕ8, ФФ4 работает.

Edited July 8, 2011 by cheburek

Great Rash · July 8, 2011

Подход неверный. Вот так правильно будет:


div.loader {
  position: fixed;
  width: 100%;
  height: 100%;
}

Осталось только эмулировать fixed при помощи экспрешна в старых ИЕ.

amelice · July 8, 2011

Область дива должна распространяться и за пределы видимости экрана если контента очень много

В таком случае, не нужно указывать 100% для элемента html - в этом случае, он берет высоту окна просмотра(так как оно является родителем для корневого элемента).

Но не уверена, хотелось бы услышать еще другие мнения по этому поводу.

Подход неверный. Вот так правильно будет:
div.loader {
  position: fixed;
  width: 100%;
  height: 100%;
}
Осталось только эмулировать fixed при помощи экспрешна в старых ИЕ.

Great Rash, можешь объяснить почему? Очень интересно.

Edited July 8, 2011 by cheburek

Great Rash · July 8, 2011

Great Rash, можешь объяснить почему? Очень интересно.

Все очень просто - если у нас куча контента, то будет вертикальный скролл, а лоадер должен блокировать страницу пока АЯКС не подгрузил что-то. Значит если мы назначим лоадеру position: absolute;, нам придется высчитывать высоту <body> и ставить эту высоту лоадеру иначе при скролле он уедет наверх.

position: fixed; решает все эти проблемы без лишних скриптов.

SelenIT · July 8, 2011

Имхо, те IE, где fixed надо было эмулировать, сейчас уже можно смело списывать в утиль. 7-ка умеет без костылей. Хотя для 6-ки, кроме экспрешнов, есть простой и гениальный до безумия финт...

Вот понадергал из разных рецептов

Непродуктивный подход. Лучше взять один рецепт и помучить его как следует, применив к своей задаче и заодно разобравшись, что там делает каждая строчка (если что неясно, такой вопрос не стыдно и на этом форуме задать). А иначе получается сборище взаимоисключающих параграфов (типа указания min-height внутри хака для IE6, который его не понимает — это аналог таблички в самолете "если вы не можете это прочитать, попросите соседа" из анекдота), и под конец сам перестаешь понимать, какую проблему решает (и какие создает) каждая такая нетривиальная запись...

amelice · July 8, 2011

Значит если мы назначим лоадеру position: absolute;, нам придется высчитывать высоту <body> и ставить эту высоту лоадеру иначе при скролле он уедет наверх.
position: fixed; решает все эти проблемы без лишних скриптов.

Это значит, что fixed не тратит время на высчитывание высоты контента, а просто берет высоту окно просмотра при height:100% и будет отображаться?

Great Rash · July 8, 2011

Значит, что он при скролле окна никуда не уедет, а так и останется висеть там куда мы его пришпилим, т.е. на всю видимую область. Это избавит нас от необходимости что-то высчитывать.

amelice · July 8, 2011

Значит, что он при скролле окна никуда не уедет, а так и останется висеть там куда мы его пришпилим, т.е. на всю видимую область. Это избавит нас от необходимости что-то высчитывать.

Great Rash, спасибо, понятно.

Подход неверный. Вот так правильно будет:
div.loader {
  position: fixed;
  width: 100%;
  height: 100%;
}
Осталось только эмулировать fixed при помощи экспрешна в старых ИЕ.

Но, без указаний позиций

top:0;
left:0;

не работает. Поэтому, позиции нужно добавить в стили.

Edited July 8, 2011 by cheburek

Great Rash · July 8, 2011

не работает. Поэтому, позиции нужно добавить в стили.

Если этот элемент будет стоять сразу после <body>, то сработает и без указания. Но вообще да, лучше добавить.

Микель · July 8, 2011

Всем спасибо за ответы. Воспользовался способом, который предложил Great Rash, все работает, в т.ч. и под ИЕ 7+, с 6 заморачиваться не буду.

Sign In

Высота блока 100%

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information