height 100% и шапка

AnyaRayne · June 6, 2009

Здравствуйте!

Сталкнулась с такой проблемой:

<html>
<style>
html body {
	margin: 0;
	padding: 0;
	height: 100%;
}
</style>
<body>
<div style="height: 80px; width: 100%; background: #fa0">header</div>
<div style="float: left; height: 100%; width: 150px; background: #0fa;">object tree</div>
<div style="height: 100%; background: #a0f;">container</div>
</body>
</html>

Суть ее в том, что появляется скролл на 80px, то есть на высоту шапки.

Как от него избавиться и сделать object tree и container нормальной высоты (100%-80px).

Заранее спасибо.

AnyaRayne · June 8, 2009

Я вашу проблему решил 15 раз уже.

Еще раз повторяю: в IE это не работает.

http://htmlbook.ru/html/!doctype.html

И что doctype должен исправить?

Nekromancer · June 8, 2009

у меня к вам вопрос? вы ие6 называете ие6? а что других версий нету чтоле у его реализиции?

ИЕ6 мёртвая версия, для него используется expression...

AnyaRayne · June 8, 2009

у меня к вам вопрос? вы ие6 называете ие6? а что других версий нету чтоле у его реализиции?
ИЕ6 мёртвая версия, для него используется expression...

У меня стоит Vista, как Вы думаете какая версия IE у меня? Чтобы не мучать скажу сразу: 7.0.6001.18000 64-bit edition.

А про IE6, хоть она и мертвая версия, однако стоит у большего числа пользователей, чем даже Firefox. Вот статистика за январь 2009 по использованию браузеров.

Вообще как вы делаете кроссбраузерную верстку, если не учитываете IE6? По моему такой подход сразу говорит о "профессионализме"...

Nekromancer · June 8, 2009

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
html, body {margin: 0;padding: 0; overflow: auto;}
#container {background: #a0f; overflow: auto; position: absolute; top: 80px; left: 150px; right: 0; bottom: 0;}
#objecttree {position: absolute; top: 80px; left:0; right: 0; bottom: 0; width: 150px; background: #0fa; overflow: auto;}
</style>
</head>
<body>
<div style="height: 80px; width: 100%; background: #fa0;">header</div>
<div id="objecttree">object tree<div style="height: 2000px;"></div></div>
<div id="container">container<div style="height: 2000px;"></div></div>
</body>
</html>

Вот, поправил, теперь и в 7ом идёт

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
html, body {margin: 0;padding: 0; overflow: auto;}
*html #container {height: expression(document.documentElement.clientHeight-80+'px');overflow-x: hidden; width: expression(document.documentElement.clientWidth-150+'px');}
*html #objecttree {height: expression(document.documentElement.clientHeight-80+'px');}
#container {background: #a0f; overflow: auto;margin-left: 150px; position: absolute; top: 80px; left: 0; right: 0; bottom: 0; }
#objecttree {position: absolute; top: 80px; left:0; right: 0; bottom: 0; width: 150px; background: #0fa; overflow: auto;}
</style>
</head>
<body>
<div style="height: 80px; width: 100%; background: #fa0;">header</div>
<div id="objecttree">object tree<div style="height: 2000px;"></div></div>
<div id="container">container<div style="height: 2000px;"></div></div>
</body>
</html>

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

Вообще как вы делаете кроссбраузерную верстку, если не учитываете IE6? По моему такой подход сразу говорит о "профессионализме"...

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

psywalker · June 8, 2009

:)

AnyaRayne · June 8, 2009

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

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

А про баги: Вы дали код, я его проверила, код не работает... без коментариев...

И про кроссбраузерность: если Вы даете код, то наверное стоит упомянуть, в каких браузерах он работает... а для меня, если не работает в каком-то из браузеров - значит вообще не работает... я не могу себе позволить выкактить требование использовать приложение только в IE или FF...

Edited June 8, 2009 by AnyaRayne

Nekromancer · June 8, 2009

Есть вариант заюзать таблицы, это значительно облегчить жизнь..

AjiTae · June 8, 2009

Хехехе, в итоге ничего лучше чем было не предложили. С эксепшеном и так уже было решено.

PS. С таблицами пробовал с самого начала - результат тот же.)

Вот и повод тов. некро опустить наглеца, т.е. меня хе-хе.

Edited June 8, 2009 by AjiTae

lavr-ik · August 10, 2009

Ужас, лемминги хавают моск ~_~ (топикстартер, я не про вас)

<style>

html, body {

margin: 0;

padding: 0;

height: 100%;

overflow: hidden;

}

</style>

Проблема - если контента больше, чем помещается на видимой области экрана, его не будет видно, т.к. body обрезает то, что выходит за его границы. Эта проблема лечится той самой грамотной комбинацией правил min-height, height: auto!important, height для body и блоков контента.

Edited August 10, 2009 by lavr-ik

Sign In

height 100% и шапка

Question

AnyaRayne

Link to comment

Share on other sites

34 answers to this question

Recommended Posts

AnyaRayne

Link to comment

Share on other sites

Nekromancer

Link to comment

Share on other sites

AnyaRayne

Link to comment

Share on other sites

Nekromancer

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

AnyaRayne

Link to comment

Share on other sites

Nekromancer

Link to comment

Share on other sites

AjiTae

Link to comment

Share on other sites

lavr-ik

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information