min-height

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.

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 👈

Источник

min-height

The min-height CSS property sets the minimum height of an element. It prevents the used value of the height property from becoming smaller than the value specified for min-height .

Try it

The element’s height is set to the value of min-height whenever min-height is larger than max-height or height .

Syntax

/* value */ min-height: 3.5em; /* value */ min-height: 10%; /* Keyword values */ min-height: max-content; min-height: min-content; min-height: fit-content(20em); /* Global values */ min-height: inherit; min-height: initial; min-height: revert; min-height: revert-layer; min-height: unset; 

Values

Defines the min-height as an absolute value.

Defines the min-height as a percentage of the containing block’s height.

The browser will calculate and select a min-height for the specified element.

The intrinsic preferred min-height .

The intrinsic minimum min-height .

Uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, argument)) .

Formal definition

Initial value	auto
Applies to	all elements but non-replaced inline elements, table columns, and column groups
Inherited	no
Percentages	The percentage is calculated with respect to the height of the generated box’s containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as 0 .
Computed value	the percentage as specified or the absolute length
Animation type	a length, percentage or calc();

Formal syntax

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

=
|

Examples

Setting min-height

table  min-height: 75%; > form  min-height: 0; > 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 18, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

min-height

Задает минимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от установленных значений свойств height , max-height и min-height . В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных стилевых свойств.

Табл. 1. Высота элемента

Значения свойств					Высота
min-height		height		max-height	height
min-height	>	height	>	max-height	min-height
min-height	>	height		max-height	min-height
min-height		height	height
min-height	>	height	min-height
min-height	>	max-height	min-height
min-height		max-height	max-height

Данные из таблицы следует понимать следующим образом. Если значение высоты ( height ) меньше значения min-height , то высота элемента принимается равной min-height .

Синтаксис

min-height: значение | проценты | inherit

Значения

В качестве значений принимаются пикселы (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются. inherit наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

     #bottom < background: #66806E url(images/clover.png) no-repeat 20px bottom; /* Параметры фона */ min-height: 80px; /* Минимальная высота */ color: #E4BC96; /* Цвет текста */ padding: 5px 5px 5px 140px; /* Поля вокруг текста */ >#bottom p < margin: 5px 0; >#bottom a 
Сайт Cloverfield
 
Информация о сайте Об авторе
 
  

В данном примере, чтобы фоновое изображение не обрезалось по верхнему краю, задана минимальная высота блока равная 80 пикселам. Результат примера показан на рис. 1.

Рис. 1. Высота блока, заданная с помощью min-height

Объектная модель

[window.]document.getElementById(» elementID «).style.minHeight

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Источник