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).

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

Nekromancer · June 6, 2009

<div style="height: 80px; width: 100%; background: #fa0; margin-bottom: -80px;">header</div>

Edited June 6, 2009 by Nekromancer

AnyaRayne · June 6, 2009

<div style="height: 80px; width: 100%; background: #fa0; margin-bottom: -80px;">header</div>

Спасибо, но это не работает!

А можно вопрос, Вы это "от балды" написали?

Nekromancer · June 6, 2009

Да

Теперь не от балды. То что вы хотите сделать просто так не возможно. Используйте абсолютное позиционирование, в котором див будет начинаться не сразу сверху а на 80px ниже..

psywalker · June 6, 2009

AnyaRayne

А можно вопрос, Вы это "от балды" написали?

Ты на моего дружище не гони, он знает, что делает

Слушай, а вот такой вариант, странный конеш, но зацени всё равно: Я короче сделал отступ -80пикселов, поднял какбы нижний контейнер, в него запихнул ещё один контейнер, а ему уже назначил отступы верхние и т. д.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ivan Matveev - Gallery</title>


<style>
*{ margin: 0; padding: 0;}
html{
	margin: 0;
	padding: 0;
	height: 100%;
}
body{ height: auto; min-height: 100%; height: 100%;}
</style>
</head>

<body>
<div style="height: 80px; width: 100%; background: #fa0; position: relative; z-index: 2;">header</div>
<div style="min-height: 100%; width: 150px; background: #0fa; margin-top: -80px;">
  <div style="margin-top: 100px;">object tree</div>

</div>


</body>
</html>

Nekromancer · June 6, 2009

psywalker, ну как то так

AnyaRayne · June 6, 2009

Я конечно извиняюсь, может у меня копипаст сломался, но по моему Вы, psywalker, тоже "от балды" написали

Пример работает только в IE и не содержит третьего блока.

Под IE у меня тоже есть рабочий вариант, и по моему он проще и красивее...

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

А вот как такое же заставить остальные браузеры показывать?

Edited June 6, 2009 by AnyaRayne

dyadya · June 6, 2009

<html>
<style>
html body {

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

AnyaRayne · June 7, 2009

<html>
<style>
html body {
- стили, как-то чаще, в head прописывают, тогда их браузеры лучше понимают...

Не суть важно... даже если объявить стиль после </html>, он все равно отработает как и в <head>...

Если кому интересно, решение здесь

AjiTae · June 7, 2009

Это не решение, в рамках данной задачи, это взятка преподу.)

Использовать js не спортивно, с ним всё делается элементарно.

AnyaRayne · June 7, 2009

Это не решение, в рамках данной задачи, это взятка преподу.)
Использовать js не спортивно, с ним всё делается элементарно.

За неимением лучшего, на мой взгляд, это самое красивое решение... Найду лучше - поделюсь

Nekromancer · June 7, 2009

я знаю лучше, но мне уже лень просто..

Edited June 7, 2009 by Nekromancer

AjiTae · June 7, 2009

Ну ну, а я знаю как поработить мир и как достичь бессмертия, но мне уже лень просто..

psywalker · June 7, 2009

я знаю лучше, но мне уже лень просто..

давай кались, не интригуй, всем интересно

Nekromancer · June 7, 2009

шапку абсолют на верх, в вашем контейнере ещё один блок с марджином сверху равным шапки.

То что вы хотите сделать просто так не возможно. Используйте абсолютное позиционирование, в котором див будет начинаться не сразу сверху а на 80px ниже..

вот я уже писал решение, чем оно не подходит?

AjiTae · June 7, 2009

Тра-ля-ля, а вот и ни... ..фига.

Проверяйте-с, прежде чем так уверенно заявлять.

Edited June 7, 2009 by AjiTae

AnyaRayne · June 7, 2009

Nekromancer, может мы не понимаем, что Вы конкретно имеете ввиду? Можно код в студию?

Edited June 7, 2009 by AnyaRayne

Nekromancer · June 7, 2009

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

сколько сайтов так построено и все работают.. а у вас нет.. если вы не умеете бороться со колапсом то вам стоит поучится..

То что вы хотите сделать просто так не возможно. Используйте абсолютное позиционирование, в котором див будет начинаться не сразу сверху а на 80px ниже..

Этот пример вообще 100% работает, и не надо напрягаться даже.

AjiTae · June 7, 2009

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

psywalker · June 7, 2009

Nekromancer

Да лана те, всё ок, напиши ты этот заветный код людям..

Nekromancer · June 7, 2009

Была какая то задача про скрол? причём тут он если нужен сайт в 100% у которого основной блок не скролится..(такова была задача).

Пример 1.

<div id="header"></div>
<div id="conteiner"></div>
<style type="text/css">
#header {height: 80px;}
#conteiner {position: absolute;top: 80px; left: 0; bottom: 0; right: 0;}
</style>

Пример 2.

<div id="header"></div>
<div id="conteiner">
<div id="content"></div>
</div>
<style type="text/css">
#header {height: 80px; float: left; width: 100%;}
#conteiner {height: 100%; width: 100%;}
#content {padding-top: 80px;}
</style>

Этот вариант и со скролом как вы хотели.

Edited June 7, 2009 by Nekromancer

AnyaRayne · June 7, 2009

Nekromancer, извините, а Вы что курили? Где это можно достать? Я тоже хочу!

Можно попросить Вас воздержаться от коментариев по теме, пока не "отпустит"

То, что Вы продемонстрировали - ни в коей мере не решает поставленную задачу.

Второй пример, приведенный мной откройте в IE, и тогда увидите, что я хотела сделать.

Nekromancer · June 7, 2009

Да я открыл, в чём проблема? вы спросили как сделать слой на 100%-80px я вам сделал, а что будет внутри слоя - ваши проблемы.

AjiTae · June 7, 2009

Слушай, некро, ты здесь могёшь гнать, что хочешь ибо на халяву, но будь это реальной работой - ты бы шёл на три буквы за элементарное непонимание тех. задания заказчика. Поверь мне, некоторые дают задания куда менее информативно, это же поняли все, кроме тебя, делай выводы.

Edited June 7, 2009 by AjiTae

AnyaRayne · June 8, 2009

Да я открыл, в чём проблема? вы спросили как сделать слой на 100%-80px я вам сделал, а что будет внутри слоя - ваши проблемы.

Я же в конкретном примере объяснила, что именно хочу от этого слоя. То, что Вы продемонстрировали я и сама могла сделать, не тратя время на придурь какого-то псевдоспециалиста.

Хочу Вас попросить впредь, если решите помогать, то хотябы удостоверьтесь, что поняли о чем идет речь...

Nekromancer · June 8, 2009

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

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

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

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

Edited June 8, 2009 by Nekromancer

Sign In

height 100% и шапка

Question

Link to comment

Share on other sites

34 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

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

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