min-height

How to set minimum height for a div in Css?

In CSS, a div element can be set to have a height based on its content. However, sometimes you might want to enforce a minimum height for a div , even if the content doesn’t fill the whole area. In this case, you can use CSS techniques to set a minimum height for the div element.

Method 1: Using Height Property

To set a minimum height for a div using the height property, you can use the min-height property. This property sets the minimum height of an element.

div  height: 200px; min-height: 100px; >

In the example above, the div element has a height of 200 pixels, but it will not be smaller than 100 pixels due to the min-height property.

You can also use the height property and the max-height property together to achieve the same result.

div  height: auto; max-height: 200px; min-height: 100px; >

In the example above, the div element has a minimum height of 100 pixels and a maximum height of 200 pixels. The height property is set to auto , which means the height will adjust to the content within the div.

Another way to set a minimum height for a div is to use the calc function.

div  height: calc(100vh - 200px); min-height: 100px; >

In the example above, the div element has a height of 100vh (100% of the viewport height) minus 200 pixels, but it will not be smaller than 100 pixels due to the min-height property.

You can also use the vh unit to set a minimum height for a div.

div  height: 50vh; min-height: 100px; >

In the example above, the div element has a height of 50% of the viewport height, but it will not be smaller than 100 pixels due to the min-height property.

Overall, there are many ways to set a minimum height for a div using the height property in CSS. The min-height property, max-height property, calc function, and vh unit are just a few examples.

Method 2: Using min-Height Property

To set a minimum height for a div using the min-height property in CSS, follow these steps:

1. Add a class or ID to the div you want to set the minimum height for. For example, let’s use my-div .
2. In your CSS file, select the my-div class or ID using a CSS selector.

.my-div  /* CSS properties go here */ >

1. Set the min-height property to the desired minimum height value. For example, let’s set it to 200px .

Here’s an example of the above CSS code applied to an HTML div:

div class="my-div"> This div has a minimum height of 200 pixels. div>

You can also use other units of measurement for the min-height property, such as em , rem , or % . Here’s an example using em :

And here’s an example using % :

Remember that the min-height property sets the minimum height of an element, so if the content inside the element exceeds this minimum height, the element will expand to fit the content.

Method 3: Using Flexbox Layout

To set the minimum height for a div using Flexbox Layout, you can use the min-height property along with the flex property. Here’s how to do it:

.child  flex: 1; min-height: 200px; >

The flex: 1 property tells the child div to fill the remaining space inside the container, while the min-height: 200px property sets the minimum height for the child div to 200 pixels.

Here’s the complete code example:

.container  height: 100vh; display: flex; flex-direction: column; > .child  flex: 1; min-height: 200px; >

In this example, the display: flex and flex-direction: column properties are used to make the container a flex container with a vertical layout.

You can also use the align-items property to vertically align the child div inside the container:

.container  height: 100vh; display: flex; flex-direction: column; align-items: center; > .child  flex: 1; min-height: 200px; >

This will center the child div vertically inside the container.

That’s it! With these simple steps, you can set the minimum height for a div using Flexbox Layout.

Method 4: Using Grid Layout

To set a minimum height for a div using grid layout, you can use the min-height property. Here’s an example:

.container  display: grid; grid-template-rows: minmax(100px, auto) 1fr; >

In this example, the container element is set to use grid layout with two rows. The first row has a minimum height of 100px and will expand to fit its contents if they are taller than 100px. The second row takes up the remaining space in the container.

You can also use the grid-template-rows property to set a minimum height for a specific row:

.container  display: grid; grid-template-rows: 50px minmax(100px, auto) 1fr; >

In this example, the second row has a minimum height of 100px and will expand to fit its contents if they are taller than 100px.

Another option is to use the grid-auto-rows property to set a minimum height for all rows:

.container  display: grid; grid-auto-rows: minmax(100px, auto); >

In this example, all rows in the container have a minimum height of 100px and will expand to fit their contents if they are taller than 100px.

Overall, using grid layout provides a flexible and powerful way to set minimum heights for divs. By using the minmax() function and the various grid properties, you can create layouts that adapt to different content sizes and screen sizes.

Method 5: Using Viewport Units (vh)

To set a minimum height for a div using viewport units (vh), you can use the following CSS code:

This sets the minimum height of the div to be 50% of the viewport height.

You can adjust the value of 50vh to be any percentage of the viewport height that you want.

Here’s an example that demonstrates how this works:

DOCTYPE html> html> head> style> body  margin: 0; padding: 0; > .header  background-color: #ccc; min-height: 20vh; > .content  background-color: #eee; min-height: 50vh; > .footer  background-color: #ccc; min-height: 10vh; > style> head> body> div class="header">div> div class="content">div> div class="footer">div> body> html>

In this example, we have three divs: a header, a content section, and a footer. We’ve set the minimum height of the header to be 20% of the viewport height, the minimum height of the content section to be 50% of the viewport height, and the minimum height of the footer to be 10% of the viewport height.

You can adjust these values to suit your needs.

That’s it! Using viewport units (vh) is a simple and effective way to set a minimum height for a div in CSS.

Источник

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 .

Источник

CSS min-height Property

Set the minimum height of a

element to 200 pixels:

Definition and Usage

The min-height property defines the minimum height of an element.

If the content is smaller than the minimum height, the minimum height will be applied.

If the content is larger than the minimum height, the min-height property has no effect.

Note: This prevents the value of the height property from becoming smaller than min-height .

Default value:	0
Inherited:	no
Animatable:	yes, see individual properties. Read about animatable Try it
Version:	CSS2
JavaScript syntax:	object.style.minHeight=»400px» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

Value	Description	Demo
length	Default value is 0. Defines the minimum height in px, cm, etc. Read about length units	Demo ❯
%	Defines the minimum height in percent of the containing block	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Источник