Обычно свойство height , указанное в процентах, означает высоту относительно внешнего блока.
Однако, всё не так просто. Интересно, что для произвольного блочного элемента height в процентах работать не будет!
Чтобы лучше понимать ситуацию, рассмотрим пример.
Пример
Наша цель – получить вёрстку такого вида:
При этом блок с левой стрелкой должен быть отдельным элементом внутри контейнера.
Это удобно для интеграции с JavaScript, чтобы отлавливать на нём клики мыши.
То есть, HTML-код требуется такой:
Как это реализовать? Подумайте перед тем, как читать дальше…
Придумали. Если да – продолжаем.
Есть разные варианты, но, возможно, вы решили сдвинуть .toggler влево, при помощи float:left (тем более что он фиксированной ширины) и увеличить до height: 100% , чтобы он занял всё пространство по вертикали.
Вы ещё не видите подвох? Смотрим внимательно, что будет происходить с height: 100% …
Демо height:100% + float:left
А теперь – посмотрим этот вариант в действии:
Как видно, блок со стрелкой вообще исчез! Куда же он подевался?
Ответ нам даст спецификация CSS 2.1 пункт 10.5.
"Если высота внешнего блока вычисляется по содержимому, то высота в % не работает, и заменяется на height:auto . Кроме случая, когда у элемента стоит position:absolute ."
В нашем случае высота .container как раз определяется по содержимому, поэтому для .toggler проценты не действуют, а размер вычисляется как при height:auto .
Какая же она – эта автоматическая высота? Вспоминаем, что обычно размеры float определяются по содержимому (10.3.5). А содержимого-то в .toggler нет, так что высота нулевая. Поэтому этот блок и не виден.
Если бы мы точно знали высоту внешнего блока и добавили её в CSS – это решило бы проблему.
Почему, когда в height пишешь в px всё нормально, а когда в процентах, как на рисунке, ничего не работает? height в процентах нельзя делать?
4 ответа 4
Если вы берете проценты, их нужно брать от чего то Т.е. либо пропишите, как сказано выше
либо укажите в родительском элементе тоже самое
Конечно 100% можно использовать, но я бы вам советовал использовать так называемые viewport меры. (vh, vw, vmin, vmax)
Не хватает только прописать body, html .
Стереть можно , у меня так получилось.
Всё ещё ищете ответ? Посмотрите другие вопросы с метками html вёрстка css стиль или задайте свой вопрос.
Похожие
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.1.10.35756
Пишу такие стили
в итоге body не 100%в высоту и соответсветнно intro тоже не растягивается
- Вопрос задан более трёх лет назад
- 2245 просмотров
Что делает этот код? Для чего все эти свойства?
Для чего вы и так блочным элементам даёте 100% ширину? Так как в данном коде width: 100% ну вообще не нужно!
По делу:
Учите наследование! % всегда берутся от родительского элемента. И если размер у родителя не указан, то и проценты не сработают!
У body родитель html, а у html окно браузера. Что бы растянуть body на 100%, нужно сначала html дать 100%, а потом body, а потом вашему #intro. Вот тогда #intro растянется на 100%.