Css height all page

CSS height Property

The height property is used to set an element’s height. This property does not include padding, borders, or margins. The height property can be specified by «px», «cm», «vh» or by percentages. The default value is «auto».

If the min-height and max-height properties are used, it will override the height property.

If height is set to one of the numeric values like (r)em, px or %, and if if the content doesn’t fit inside of the particular height, this will cause overflowing. The CSS overflow property specifies, how the container will deal with the overflowing.

Initial Value	auto
Applies to	all elements
Inherited	No.
Animatable	Yes. Height is animatable.
Version	CSS1
DOM Syntax	object.style.height = «400px»;

Syntax

height: auto | length | initial | inherit;

Example of the height property:

html> html> head> title>The title of the document title> style> div < height: 60px; background-color: #1c87c9; color: #eee; > p < height: 30px; background-color: #8ebf42; color: #eee; > style> head> body> h2>Height property example h2> div>The height of this div element is set to "60px". div> p>The height of this paragraph is set to "30px". p> body> html>

Result

Example of the height property with the HTML tag:

html> html> head> title>The title of the document title> style> body < background-color: #ccc; > .height-normal < height: auto; > .height-big < height: 100px; > style> head> body> h2>Height property example h2> p>Here the height is set to "auto" p> img class="height-normal" src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png"> br> hr> p>The height for this image is defined as "100px". p> img class="height-big" src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png"> body> html>

Example of the height property with the «length» value:

html> html> head> title>The title of the document title> style> .container < height: 50vh; border: 2px solid #1c87c9; padding: 5px; > style> head> body> h2>Height property example h2> div class="container"> p>Here the height is specified as "50vh". p> div> body> html>

Example of the height property with all the values:

html> html> head> title>The title of the document title> style> .red-container < height: 30vh; border: 2px solid #f45e30; color: #f45e30; > .blue-container < height: 40%; width: 30%; border: 2px solid #1c87c9; color: #1c87c9; margin-top: 20px; > .orange-container < height: 100px; border: 2px solid #f9fc35; color: #f9fc35; margin-top: 20px; > .green-container < height: auto; border: 2px solid #8ebf42; color: #8ebf42; margin-top: 20px; > style> head> body> h2>Height property example h2> div class="red-container"> Height 30vh div class="blue-container"> Height 40% div> div> div class="orange-container"> Height 100px; div> div class="green-container"> Height (auto) div> body> html>

Values

Value	Description	Play it
auto	When we use this value, the browser calculates the original height of the image or box. This is the default value of this property.	Play it »
length	Defines the height with px, cm etc.	Play it »
%	Defines the height with percent.
initial	Makes the property use its default value.	Play it »
inherit	Inherits the property from its parent element.

Browser support

Practice Your Knowledge

Which of the following CSS properties override the height property?

Related Resources

• CSS border Property
• CSS width Property
• CSS margin Property
• How to Vertically Center Text with CSS
• How to Blur the Background Image in CSS
• How to Add Border to Image in CSS
• How to Style Comment Box Using CSS
• How to Style a Horizontal Line
• How to Add a Frame Around an Image
• How to Make Images Responsive with CSS
• How to Disable the Resizing of the Element?
• How to Style a Box Drop-Down with Only CSS?
• How to Set the Checkbox Size with HTML and CSS
• How to Resize Images Proportionally for Responsive Web Design With CSS
• How to Add Multiple Background Images with CSS
• How to Center the Content Vertically and Horizontally Using Flexbox
• How to Add a Blur Filter to the Background Image
• How to Create a Modal Dialog Box with CSS and JavaScript
• How to create a drop-down navigation menu with CSS
• How to Add Advanced Hover Effects to an Image with Pure CSS
• How to Create an Overlay Using CSS
• How to Hide Scrollbars with CSS
• How to Style a Checkbox with CSS
• How to Maintain the Aspect Ratio with CSS
• How to Align Inline-Block Elements to the Top of Container
• How to Create a Parallax Scrolling Effect
• How to Change the Background Image on Scroll Using CSS
• How to Create Loading Spinner With CSS
• How to Create a Fixed Navbar with CSS
• How to Set the Size of the Background-image
• How to Align Divs Side by Side
• How to Align the Content of a Div Element to the Bottom
• How to Make a Div Vertically Scrollable
• How to Auto-Resize the Image to fit an HTML Container
• How to Make an HTML Element not Larger Than its Content
• How to Give a Div Element 100% Height of the Browser Window
• How to Create Animated Menu Box With Icons
• How to Center an Image Between the Containers
• How to Create a Fullscreen Image Slider with Pure CSS
• How to Add a Glass Background Effect to the Text
• How to Create a Responsive Iframe with CSS
• How to Vertically Align Elements in a Div
• How to Align a Checkbox and Its Label Consistently Cross-Browsers
• How to Set Space Between Flexbox Items
• How to Add Lines Before and After the Heading Text
• How to Vertically Center a
• How to Cut Corners With Pure CSS
• How to Scale the Content of Element
• How to Create Sticky Footer with CSS
• How to Add a Circle Around a Number in CSS
• How to Crop and Center Images Automatically in CSS
• How to Set the Equivalent of «src» Attribute of an Tag in CSS
• How to Add Both a Background Image and CSS3 Gradient to the Same Element
• How to Center a Button Both Horizontally and Vertically within a Div
• How to Create Circles with CSS
• How to Change the Input and Button Images with CSS
• How to Limit Border Length with CSS
• How to Clear the Canvas for Redrawing
• How to Overlay Images with CSS
• How to Turn a Rectangular Image into a Cropped Square Image with CSS
• How to Make the Div Height to Auto-Adjust to the Background Size
• How to Make Scrollbar Visible Only when Necessary
• How to Remove Background Image in CSS
• How to Center the Text in the HTML Table Row
• How to Apply Multiple Transforms in CSS
• How to Set a Box-Shadow on One Side of the Element
• How to Make a Fill the Height of the Remaining Space
• How to Change the Color of an
  

  ---

  Element

• How to Overlay One Div Over Another
• How to Center a on the Screen Using jQuery
• How to Make a Div Fill the Remaining Width
• How to Add Border Inside a Div
• How to Get Image Size Using JavaScript
• How to Apply CSS Style to the Element Name
• How to Set an Equivalent of the «cover» Value of the background-size Property for an Tag
• How to Create a Two-Column Div Layout with the Right Column Having Fixed Width
• How to Create a Table with a Fixed Header and Scrollable Body
• How to Rotate the Element by 90 Degrees
• How to Set the Size of the Element
• How to Vertically Align a Text Within a Tag to the Center
• How to Add a Text on the HTML5 Element
• How to Vertically Center Inline (Inline-Block) Elements
• How to Vertically Align an Image Within a Div With Responsive Height
• How to Place a Div in the Middle of the Screen when It is Smaller than the Page
• How to Horizontally Center Contents Within a Div
• How to Make Rounded Corners Hide the Overflow in Opera/Chrome
• How to Make a Fixed Page Header Not Overlap In-Page Anchors
• How To Make a Element Extend to the Page Bottom Even Having No Content
• How to Relatively Position an Element without It Taking Space in the Document Flow
• How to Create an Animation with a Delay in CSS
• What is the Difference Between the «inline» and «inline-block» Values of the CSS display Property

Источник

height

The height CSS property specifies the height of an element. By default, the property defines the height of the content area. If box-sizing is set to border-box , however, it instead determines the height of the border area.

Try it

The min-height and max-height properties override height .

Syntax

/* values */ height: 120px; height: 10em; height: 100vh; /* value */ height: 75%; /* Keyword values */ height: max-content; height: min-content; height: fit-content(20em); height: auto; /* Global values */ height: inherit; height: initial; height: revert; height: revert-layer; height: unset; 

Values

Defines the height as a distance value.

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

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

The intrinsic preferred height.

The intrinsic minimum height.

Box will use the available space, but never more than max-content

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

Enables selecting a middle value within a range of values between a defined minimum and maximum

Accessibility concerns

Ensure that elements set with a height aren’t truncated and/or don’t obscure other content when the page is zoomed to increase text size.

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 value computes to auto . A percentage height on the root element is relative to the initial containing block.
Computed value	a percentage or auto or the absolute length
Animation type	a length, percentage or calc();

Formal syntax

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

=
|

Examples

Setting height using pixels and percentages

HTML

div id="taller">I'm 50 pixels tall.div> div id="shorter">I'm 25 pixels tall.div> div id="parent"> div id="child">I'm half the height of my parent.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%; > 

Result

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.

Источник