как растянуть на 100% div-блок (position:absolute;)?

artuska · May 7, 2007

В общем, проблема такова:

есть div-блок, котрый позиционирован по абсолютным координатам, допустим, слева:100px и сверху:100px;

Мне нужно его растянуть до низа страницы - т.е. сделать высоту:100%.

Пишу, значит: height:100%; и происходит следующее: этот div-блок "вылезает" за низ экрана ровно на столько, на сколько я его отодвинул сверху - на 100px!!!

Что делать? Может я изначально неправильно делаю?

Как растянуть этот блок ровно до низа экрана?

А, еще, доктайп: quot;-//W3C//DTD HTML 4.01 Transitional//EN">

В IE этот прикол со 100% работает корректно - ниче никуда не вылазит, а в Мозилле глюки - вылазит!

Dimitry Wolotko · May 7, 2007

Пример кода в студию.

artuska · May 7, 2007

Да и зачем тут пример?

Разве никогда не приходилсь растягивать позиционированный по абсолютным координатам слой на 100%?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <title>div</title>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <style type="text/css">
 #box
 {
 width:100px;
 height:100%;

 position:absolute;
 top:100px;
 left:100px;

 border: #000 1px solid;
 }
 </style>
 </head>

 <body>


 <div id="box">aaa</div>


 </body>
</html>

Вот, здесь все простенько и ясненько...

artuska · May 7, 2007

А еще, вот если я этот див (id="box") положу внутрь еще одного дива, то див id="box" вообще не будет растягиваться в высоту - только по высоте строчек!!!

<div>
 <div id="box">aaa</div>
</div>

Тута он вообще не растягивается по высоте.(((

rash · May 7, 2007

artuska, так у вас та же проблема осталась...

artuska · May 7, 2007

Ну да, осталась, просто попросили пример кода в студию, вот я его и написал...

Вот так работает в Мозилле корректно, в IE все равно не растягивается до низа...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
 <title>div</title>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <style type="text/css">
 #box
 {
 width:100px;
 //height:100%; /* для IE */

 position:absolute;
 top:100px;
 left:100px;
 bottom:0px; /* для Мозиллы */

 border: #000 1px solid; /* чтоб сразу видно было) */
 }
 </style>
 </head>

 <body>

 <div id="box">aaa</div>

 </body>
</html>

Tokolist · May 17, 2007

2 artuska

Думаю это поможет

<html>
<head>
<style>
body {
 background-color: red;
}

#content {
 position: absolute;
 width: 100%;
 width: expression(document.body.clientWidth + "px");
 height: expression((document.body.clientHeight - 10) + "px");
 bottom: 0;
 overflow: auto;
 background-color: white;
 top: 10px;
 left: 0;
}

</style>
</head>

<body>

<div id="content">

content

</div>
</body>
</html>

Видел также на цссплей примеры без скриптов (ссылок не помню). Поищи там.

http://www.cssplay.co.uk/

Tokolist · May 18, 2007

На счет цссплей, нашел ссылку

http://www.cssplay.co.uk/layouts/fixit.html

и переработал свой пример без експрешинов

<html>
<head>
<style type="text/css">
body {
 margin: 0;
 border: 0;
 padding: 0;
 height: 100%; 
 max-height: 100%;
 background-color: red;
 overflow: hidden;
}

* html body {
 padding: 10px 0 0 0; 
}

#content {
 position: fixed;
 /*width: 100%;
 width: expression(document.body.clientWidth + "px");
 height: expression((document.body.clientHeight - 10) + "px");*/
 top: 10px;
 left: 0;
 right: 0;
 bottom: 0;
 overflow: auto;
 background-color: white;
}

* html #content {
 height: 100%; 
 width: 100%; 
}

</style>
</head>

<body>

<div id="content">

content

</div>
</body>
</html>

Fu-tai · May 20, 2007

не очень понимаю, нафига Див тянуть на высоту в 100% !!!?

Если он по определению растягивается по контенту в нем!

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

Не создавайте себе проблем!!!

Tokolist · May 21, 2007

не очень понимаю, нафига Див тянуть на высоту в 100% !!!?
Если он по определению растягивается по контенту в нем!
Да и зачем создавать такой див. Типа контейнер для всего остального? Дык, можно ограничить боди и спокойно выводить контент на нем без не нужного дива!!!?
Не создавайте себе проблем!!!

Ну во первых зачем так злится то?

Такую тему уже встречаю не первый раз. Встречалась и на других формах. Раз люди спрашивают значит им это нужно

Кроме того подобный пример на цссплей есть значит уже эта тема не отстой

Ты бы лучше помог с проблемой, а не орал Хотя вроде проблема уже решена

EvilCartman · May 21, 2007

переработал свой пример без експрешинов
#content {
 position: fixed;

А теперь попросим маэстро выполнить задание, оставив position:absolute;, как и написано в заголовке топика. И без expression, если можно -- хочется увидеть кроссбраузерный код.

Tokolist · May 21, 2007

А теперь попросим маэстро выполнить задание, оставив position:absolute;, как и написано в заголовке топика. И без expression, если можно -- хочется увидеть кроссбраузерный код.

Кхе-кхе, и чем же тебя этих два варианта не устраивают, многоуважаемый EvilCartman?

И что тебе мешает изменить во втором примере fixed на absolute. Или ты даже не пробовал? А я пробовал - все ОК

Tokolist · June 1, 2007

position:absolute таки не работает в ИЕ, когда контента много и появляется вертикальная прокрутка. сегодня проверял. первый раз проверял без контента.

dreamer_ · June 2, 2007

а в ч?м прикол? у меня 1-на только узкая красная полоска сверху, и под ней на белом фоне (во весь экран), только надпись content )

Дядя Саша · June 2, 2007

Лично мое мнение - зачем вообще тянуть страничку на сто процентов, если у вас контента не хватает? Почему у всех проблемы со свойством height? Да потому что от него надо отказатся совсем (я имею в виду данный пример, где надо именно чтоб на весь екран было ). Сайт с контентом в три строки, а растягивается на все 19 дюймов, зачем спрашивается? Проблем с этим станет меньше если при определении структуры сайта исходить из его предназначения и количества информации которая будет на нем отображена. Хотите на весь экран? Так добавте туда побольше интересной и нужной инфы.

Тогда это будет оправдано.

maza · September 1, 2007

Дядя Саша, ваши взгляды на верстку примитивны! Не забывайте про то, что дизайны разные бывают. Красивые, уникальные дизайны зачастую не много, но отличаются от прижившихся "стандартов" (шапка, 2 или 3 колонки, футер) и по этому понадобится может любой при?м. Правильно сказал Tokolist, если если об этом постоянно разговаривают, значит людям это нужно!

Dn · September 5, 2007

Да причем тут даже height, решение здесь предложенное и по горизонтали работает с абсолютным дивом и шириной 100% и при растягивании окна слой тоже тянется.

sashakiselev · September 15, 2010

Я нашел поиском эту тему - мне она оч. актуална - самая большая проблема для меня это понимание в css не фиксированных значений.

Я не знаю имеет ли такой подход право на существование - совмещение фиксированных блоков с резиновыми. Возможно ли подобное?:

Например типа того:

ЗЫ.. по логике вещей понимаю, что формулы по типу "резиновый родитель=резиновый потомок+фикс.потомок" быть не может. Табличным путем я помню это вполне решаемо, но как это на дивах выполнить? Ведь по идее часто встречаемая должно быть штука.. нет?

Или это только картинками можно сделать (ложные колонки - faux column; книжка "Мастерская CSS")?

Edited September 15, 2010 by sashakiselev

psywalker · September 15, 2010

Так не пойдёт?

http://psywalker.ru/Forum/Column/Untitled-3.html

sashakiselev · September 15, 2010

psywalker, спасибо.. не совсем то - но интересно,

и кстати откуда там синий цвет у Left aside? я так и не понял

..готовые решения тоже попадались -

Вот приблизительно то что надо

http://blog.sjinks.pro/test/3col/3col_h100.html

но по-моему это немного перебор - лучше картинками или таблицами.. нет?

Если коротко сформулировать че мне надо - хочу простого => правильного решения подобной задачи -

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

Great Rash · September 15, 2010

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

Тогда чем не устраивает решение, предложенное psywalker'ом?

sashakiselev · September 15, 2010

Тогда чем не устраивает решение, предложенное psywalker'ом?

Я сейчас с этим решением как раз ковыряюсь - начал с простого ctrl C / ctrl V - пока не понял

откуда там синий цвет "создающий" одну из колонок.. т.е. у меня в браузере при открытии локально как хтмл документ - его нет.. а раз его нет то и увы решения нет.. вобщем не понятно.

———————————————--

упс.. картинку не видел в упор.. С "синим цветом" разобрался.

Edited September 15, 2010 by sashakiselev

sashakiselev · September 15, 2010

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

А метод как раз назыают ложной колонкой так? (спортивный интерес)

Jiggy_89 · May 7, 2012

http://blog.sjinks.pro/test/3col/3col_h100.html
Если коротко сформулировать че мне надо - хочу простого => правильного решения подобной задачи -
Две колонки (как выше), высота одной регулируется заполняемым контентом, при том что бэкграунд второй колонки (пустой или с меньшим по объему содержжимым) всегда "догоняет" первую, т.е. чтобы она не обрубалась.

А-уууу, народ? Мне именно это и надо! Ссылка, по которой предлагалось решение, не работает. Не подскажите снова? Пожалуйста, очень надо.

Sign In

как растянуть на 100% div-блок (position:absolute;)?

Question

Link to comment

Share on other sites

23 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

Join the conversation

Обсуждения

Important Information