Html height 100 parent

How to fix CSS height 100 not working

Fix issues with setting height 100%. This post goes over four steps to identify and fix setting height 100.

Dec 9, 2022 | Read time 8 minutes

🔔 Table of contents

One frustrating thing when design web pages is the height 100% not working correctly. For example, the content overflows from the parent!

The main reason why using CSS height:100 property is not working for your design is mainly due to how the parent is structured.

This post will go over a few steps or checklist on how to approach this issue.

Steps to take to fix height 100% not working issues

1. Check that the HTML and CSS is valid — no typos, and use on non-replaced inline elements
2. Check the parent element height. The additionally, check if there is content in the element.
3. Are you using min-height or max-height? These properties override the values of height .
4. Remove height settings if using flex layouts.

Check that the HTML and CSS is valid!

CSS height property can be applied to all elements and controls the height of the content area.

The first thing to check when it is not working is to check the syntax. Check that you are not having any typos, or using invalid values, etc:

   When using percentages (%), also make sure that you are specifying the number correctly. The following will not be valid numbers to use for percentages:

Tip: Height will not work with non-replaced inline elements.

According to the spec (https://w3c.github.io/csswg-drafts/css-sizing/#preferred-size-properties) height will not work with non-replaced inline elements.

So what is a “replaced” element then? A replaced element is something thats got content outside of our CSS formatting model — this could mean IMG, VIDEO, IFRAME, etc. Those elements load content from an external source (eg from a CDN). Most HTML elements are “non-replaced”!

An inline element is one that has the default display of inline-table or inline-block .

Generally speaking, examples of “non-replaced inline” element can be elements such as a , b , cite , def , em , etc.

Check the parent element height

When we set an element to be height:100% , we need to consider the parent element. According to the specifications, when using percentages, the height is calculated as the percentage of the containing block’s height.

In most cases, we need to explicitly specify the height of the parent element ( body and html tag) to height:100% .

Take the following example when specifying height 100% on the .main class is not working:

 See the Pen Untitled by ⭐ Kentaro ⭐ (@kentaro_au) on CodePen.

To fix this, we specify a height for the and tags:

Tip: Make sure to specify the height of both body and html tags

Are you using min-height or max-height?

An example of when height 100% will not work is when you have not properly used the min-height or max-height . Lets consider the following code that will not work:

  Similar to the previous example, since the and tags do not specify the height value, the height:100% on the .main class will not take effect.

The min-height CSS property just sets the minimum height of the element. To fix this, we just change the min-height to height on the html and body tags.

Remove height settings if using flex layouts

A common misunderstanding with height 100% issues is when we are combining it with flex layouts.

See the Pen Untitled by ⭐ Kentaro ⭐ (@kentaro_au) on CodePen.

 From the example, we cannot see .flex-1 is not appearing at all. We can see that the width for .flex-1 is being applied but not the height 100% setting.

 To fix this, we just need to remove the height:100% and we can see that the .flex-1 with background of acqua is now appearing.

Why does this work? When using flex the align-items control the vertical behavior.

This has the default value of stretch so it just works naturally.

When we introduce height:100% , this overrides the flex calculation.

The calculation of the height of .flex-1 now depends on the parent element ( .container ).

Since the parent does not have a explicit height -> the child element’s height becomes zero.

Tip: Use vh instead of height 100% percentage

vh is the height of the viewport. This will give you a element that covers the height of the viewable area of the screen and would have the intended effect of filling the whole page.

Additionally, depending on the device and orientation, you may want to use vm (eg landscape)

Browser suppport

• height is widely supported with modern browsers and older versions. This is because this value has been fundamental and exists ever since the CSS1 specifications
• some issues with IE10 and IE11 do not appear to support overriding min-width or max-width values using the initial value.
• max-width doesn’t work with images in table cells in IE.

Summary

In this post we looked at a common issue with web design of setting height 100. The most common reason is that the parent element is not explicitly setting the height.

Changing the AND tags to have height:100% will mostly fix the majority of styling issues. Other issues arise when we use flex layouts. It is recommended not to mix height:100% with flex layouts since flex items come initially with align-items:stretch .

Additionally misuse of the min-height and max-height properties can cause issues. These properties can override the height values.

👋 About the Author

G’day! I am Kentaro a software engineer based in Australia. I have been creating design-centered software for the last 10 years both professionally and as a passion.

My aim to share what I have learnt with you! (and to help me remember 😅)

👉 See Also 👈

Источник

DIV на всю высоту родителя?

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

Но это же костыль. Потом всем остальным блокам давать mardin, чтоб они выползли из под этого элемента. Неужели в CSS нет человеческого решения для этого?

@iiil там все ок, спасибо. просто это 2 части по сути одного вопроса — нужна тень от сайдбара в сторону мейнконтента и для этого сайдбар нужно сделать 100% по высоте.

Слева сайдбар, справа мейнконтент. Оба флоат лефт. Если сайдбар сделать абсолютом, то мейнконтент проваливается под него влево. Нужно делать margin-left: 300px. Решение, да, но костыльноватове)

На самом деле свойство height, указанное в %, работает только если для внешнего блока указана высота. Либо для элементов с абсолютным позиционированием. В этом случае нужно указать top 0 и left 0

.fullpage < position: relative; margin: 0px; padding: 0px; max-width: 100%; min-height: 200%; max-height: 200%; overflow: hidden; >#screen_1, #screen_2 < position: absolute; left: 0px; width: 100%; height: 50%; margin: 0px; padding: 0px; >#screen_1 < top: 0px; >#screen_2

fullpage — родительский блок с высотой в 2 экрана (200%), который содержит в себе 2 дочерних блока с высотой по 1 экрану каждый (50% от fullpage). У первого top: 0px и высота 50%, у второго top: 50% (т.к. он идёт встык после первого блока). Таким образом, мы можем задать n-е кол-во блоков-экранов с высотой (100% / n) и точкой top для каждого
for (i = 0; i < n; i++) top[i] = (100% / n) * i;
>
:)))

Да, а ещё в современных браузерах поддерживается такая клёвая адаптивная штука, как vh и vw, что есть размеры видимой области окна браузера по высоте и ширине соответственно:

НО! Эта штука не поддерживается на разных мобильных браузерах и на старых версиях обычных браузеров, так что пока эта штука не такая уж и крутая 🙁

Попробуй задать странице display: flex, а дочерним блокам align-self: stretch (+ flex-shrink: 0, если не нужно сжатия блоков) и не забудь, чтобы у дочерних элементов была указана ширина. Для меня такой способ сработал

Источник

DIV на всю высоту родителя?

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

Но это же костыль. Потом всем остальным блокам давать mardin, чтоб они выползли из под этого элемента. Неужели в CSS нет человеческого решения для этого?

@iiil там все ок, спасибо. просто это 2 части по сути одного вопроса — нужна тень от сайдбара в сторону мейнконтента и для этого сайдбар нужно сделать 100% по высоте.

Слева сайдбар, справа мейнконтент. Оба флоат лефт. Если сайдбар сделать абсолютом, то мейнконтент проваливается под него влево. Нужно делать margin-left: 300px. Решение, да, но костыльноватове)

На самом деле свойство height, указанное в %, работает только если для внешнего блока указана высота. Либо для элементов с абсолютным позиционированием. В этом случае нужно указать top 0 и left 0

.fullpage < position: relative; margin: 0px; padding: 0px; max-width: 100%; min-height: 200%; max-height: 200%; overflow: hidden; >#screen_1, #screen_2 < position: absolute; left: 0px; width: 100%; height: 50%; margin: 0px; padding: 0px; >#screen_1 < top: 0px; >#screen_2

fullpage — родительский блок с высотой в 2 экрана (200%), который содержит в себе 2 дочерних блока с высотой по 1 экрану каждый (50% от fullpage). У первого top: 0px и высота 50%, у второго top: 50% (т.к. он идёт встык после первого блока). Таким образом, мы можем задать n-е кол-во блоков-экранов с высотой (100% / n) и точкой top для каждого
for (i = 0; i < n; i++) top[i] = (100% / n) * i;
>
:)))

Да, а ещё в современных браузерах поддерживается такая клёвая адаптивная штука, как vh и vw, что есть размеры видимой области окна браузера по высоте и ширине соответственно:

НО! Эта штука не поддерживается на разных мобильных браузерах и на старых версиях обычных браузеров, так что пока эта штука не такая уж и крутая 🙁

Попробуй задать странице display: flex, а дочерним блокам align-self: stretch (+ flex-shrink: 0, если не нужно сжатия блоков) и не забудь, чтобы у дочерних элементов была указана ширина. Для меня такой способ сработал

Источник

height

CSS атрибут height позволят обозначать высоту элемента. По умолчанию, свойство определяет высоту внутренней области. Если box-sizing имеет значение border-box , то свойство будет определять высоту области рамки.

Интерактивный пример

Атрибуты min-height и max-height при добавлении меняют значение height .

Синтаксис

/* Значения-ключевые слова */ height: auto; /* значения */ height: 120px; height: 10em; /* значения */ height: 75%; /* Глобальные значения */ height: inherit; height: initial; height: unset; 

Значения

Высота — фиксированная величина.

Высота в процентах — размер относительно высоты родительского блока.

border-box Экспериментальная возможность

content-box Экспериментальная возможность

Браузер рассчитает и выберет высоту для указанного элемента.

fill Экспериментальная возможность

Использует fill-available размер строки или fill-available размер блока, в зависимости от способа разметки.

max-content Экспериментальная возможность

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

min-content Экспериментальная возможность

Внутренняя минимальная предпочтительная высота.

available Экспериментальная возможность

Высота содержащего блока минус вертикальные margin , border и padding .

fit-content Экспериментальная возможность

• внутренняя минимальная высота
• меньшая из внутренней предпочтительной высоты и доступной высоты

Формальный синтаксис

height =
auto | (en-US)
(en-US) | (en-US)
min-content | (en-US)
max-content | (en-US)
fit-content( (en-US) )

=
| (en-US)

Пример

HTML

div id="taller">Я 50 пикселей в высоту.div> div id="shorter">Я 25 пикселей в высоту.div> div id="parent"> div id="child"> Моя высота - половина от высоты родителя. div> div> 

CSS

div  width: 250px; margin-bottom: 5px; border: 2px solid blue; > #taller  height: 50px; > #shorter  height: 25px; > #parent  height: 100px; > #child  height: 50%; width: 75%; > 

Результат

Проблемы доступности

Убедитесь, что элементы с height не обрезаются и / или не затеняют другое содержимое, когда страница масштабируется для увеличения размера текста.

Спецификации

Начальное значение	auto
Применяется к	все элементы, кроме незаменяемых строчных элементов, табличных колонок и групп колонок
Наследуется	нет
Проценты	Процент для генерируемого блока рассчитывается по отношению к высоте содержащего блока. Если высота содержащего блока не задана явно (т.е. зависит от высоты содержимого), и этот этот элемент позиционирован не абсолютно, значение будет auto . Процентная высота на корневом элементе относительна первоначальному блоку.
Обработка значения	процент, auto или абсолютная длина
Animation type	длина, проценты или calc();

Поддержка браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

This page was last modified on 15 июл. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Источник