Почему height 100 не работает

DIV height:100% не работает

Уже пролазил весь инет вместе с Google и нет никаких результатов.
Оказывается что заполнить background на всю высоту DIV на 100% не выходит..

только фиксированная высота в пикселях получается.
но нет возможности потому что каждый раз страница динамически меняет свою высоту..

. Как же так все эти всемирные програмисты упустили такой важный пункт.

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

может кто знает в новой формулировке CSS3 есть какие то варианты ?

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Как сделать div 100% height от возможного
http://spimun.com/ В верстке я еще новичек. поэтому сильно намудрил всего) там все и css и html в.

Два div блока с высотой height:100% в одну линию
Есть два блока. Оба имеют высоту height:100% и фиксированную ширину. Нужно поставить их в одну.

Блок на растягивается на height:100%; min-height: 100%;
Подскажите пожалуйста, почему мне не получается растянуть блок во всю высоту браузера? Вроде бы.

Не работает свойство height:100%
почему то ставлю высоту 100 % а элемент не растягивается до высоты родителя.

13208 / 6596 / 1041
Регистрация: 10.01.2008
Сообщений: 15,069

Высота в процентах работает только если высота родителя указана явно, либо если родитель абсолютно спозиционирован. В остальных случаях высота в процентах игнорируется и считается auto.

Регистрация: 26.05.2011
Сообщений: 379
нет так тоже не работает. я уже пробовал.. все без результатов.
228 / 208 / 27
Регистрация: 18.02.2010
Сообщений: 1,985

netsolex, сама идея div вёрстки так и была задумана, что бы вертикаль заполнялась в соответствии с контентом в нёё вложенным, если вы хотите заполнить вертикаль «пустотой» ну или фоном вам нужна табличная вёрстка.

Регистрация: 26.05.2011
Сообщений: 379

да конечно в таблице нет проблем. я бы и не спрашивал.
все что меня интересовало это в DIV . ну да ладно если нереально сделать заполнение на 100% вертикально так тому и быть.
буду искать другие пути заполниния..
хотя всетаки как странно что нашел огромное количество эдинтичных вопросов и нигде нет ответа что бы DIV мог заполняться background на 100% по высоте.

очень много есть вариантов и предложений но ниодин не рабочий.

а вообще непонятно в чем смысл такой идеи что сам div сам по себе не имеет такой возможности по вертикали. очень в странно все это.

Как сделать div с height 100% с помощью CSS.

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

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

   Блок, который должен растянуться на 100% высоты окна браузера

Но, как видите это свойство не работает. Блок не хочет растягиваться на всю ширину окна браузера.

Как решить эту проблему? Почему не работает свойство height:100%?

Все дело в том, что 100% должны браться от высоты родительского элемента. А какая у нас высота родительского элемента? Для элемента div, в данном примере, этими родительскими элементами являются элементы body и html.

По умолчанию, свойство height этих элементов принимает значение auto, а значит эти элементы имеют такую высоту, чтобы вместить в себе всю содержимое и не больше.

Чтобы изменить ситуацию, родительским элементам body и html также нужно добавить свойство height 100%.

Давайте посмотрим, что из этого получиться.

html, body

Ну, вот, совсем другое дело. Теперь наш блок растянут на 100% высоты. Используйте это на практике.

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

CSS height в % не работает?

Почему, когда в height пишешь в px всё нормально, а когда в процентах, как на рисунке, ничего не работает? height в процентах нельзя делать?

      body.style_body < background-attachment: scroll; background-clip: border-box; background-origin: padding-box; direction: ltr; display: block; margin: 0px auto; overflow: scroll; padding: 0px; position: relative; >.gods_area School.ua

Отслеживать
2,455 3 3 золотых знака 19 19 серебряных знаков 35 35 бронзовых знаков
задан 22 ноя 2011 в 10:44
2,468 22 22 золотых знака 50 50 серебряных знаков 96 96 бронзовых знаков

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

Если вы берете проценты, их нужно брать от чего то Т.е. либо пропишите, как сказано выше

body, html

либо укажите в родительском элементе тоже самое

body.style_body

Отслеживать
ответ дан 22 ноя 2011 в 11:22
368 1 1 серебряный знак 13 13 бронзовых знаков

Конечно 100% можно использовать, но я бы вам советовал использовать так называемые viewport меры. (vh, vw, vmin, vmax)

body < margin:0; >div

 100 высота

Отслеживать
ответ дан 2 окт 2017 в 17:36
user245150 user245150

Не хватает только прописать body, html .

Отслеживать
ответ дан 22 ноя 2011 в 11:03
14.7k 1 1 золотой знак 26 26 серебряных знаков 48 48 бронзовых знаков

Стереть можно , у меня так получилось.

Отслеживать
ответ дан 22 ноя 2011 в 10:53
Draculidze Draculidze
65 7 7 бронзовых знаков
22 ноя 2011 в 11:00
так ты мой код посмотри
22 ноя 2011 в 11:01
Сотри самую первую строчку < ! D O C T Y P E h t m l >😉
22 ноя 2011 в 11:08
@Draculidze, чем вам доктайп не угодил?
22 ноя 2011 в 11:15
@ling +1) Какая разница?
22 ноя 2011 в 11:26

html
вёрстка
css

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Особенности свойства height в %

Обычно свойство height , указанное в процентах, означает высоту относительно внешнего блока.

Однако, всё не так просто. Интересно, что для произвольного блочного элемента height в процентах работать не будет!

Чтобы лучше понимать ситуацию, рассмотрим пример.

Пример

Наша цель – получить вёрстку такого вида:

При этом блок с левой стрелкой должен быть отдельным элементом внутри контейнера.

Это удобно для интеграции с JavaScript, чтобы отлавливать на нём клики мыши.

То есть, HTML-код требуется такой:

Как это реализовать? Подумайте перед тем, как читать дальше…

Придумали. Если да – продолжаем.

Есть разные варианты, но, возможно, вы решили сдвинуть .toggler влево, при помощи float:left (тем более что он фиксированной ширины) и увеличить до height: 100% , чтобы он занял всё пространство по вертикали.

Вы ещё не видите подвох? Смотрим внимательно, что будет происходить с height: 100% …

Демо height:100% + float:left

.container < border: 1px solid black; >.content < /* margin-left нужен, так как слева от содержимого будет стрелка */ margin-left: 35px; >.toggler < /* Зададим размеры блока со стрелкой */ height: 100%; width: 30px; float: left; background: #EEE url("arrow_left.png") center center no-repeat; border-right: #AAA 1px solid; cursor: pointer; >

А теперь – посмотрим этот вариант в действии:

Как видно, блок со стрелкой вообще исчез! Куда же он подевался?

Ответ нам даст спецификация CSS 2.1 пункт 10.5.

«Если высота внешнего блока вычисляется по содержимому, то высота в % не работает, и заменяется на height:auto . Кроме случая, когда у элемента стоит position:absolute .»

В нашем случае высота .container как раз определяется по содержимому, поэтому для .toggler проценты не действуют, а размер вычисляется как при height:auto .

Какая же она – эта автоматическая высота? Вспоминаем, что обычно размеры float определяются по содержимому (10.3.5). А содержимого-то в .toggler нет, так что высота нулевая. Поэтому этот блок и не виден.

Если бы мы точно знали высоту внешнего блока и добавили её в CSS – это решило бы проблему.

/*+ no-beautify */ .container < height: 200px; /* теперь height в % внутри будет работать */ >