Html div height example

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

Источник

CSS Height, Width and Max-width

The CSS height and width properties are used to set the height and width of an element.

The CSS max-width property is used to set the maximum width of an element.

CSS Setting height and width

The height and width properties are used to set the height and width of an element.

The height and width properties do not include padding, borders, or margins. It sets the height/width of the area inside the padding, border, and margin of the element.

CSS height and width Values

The height and width properties may have the following values:

• auto — This is default. The browser calculates the height and width
• length — Defines the height/width in px, cm, etc.
• % — Defines the height/width in percent of the containing block
• initial — Sets the height/width to its default value
• inherit — The height/width will be inherited from its parent value

CSS height and width Examples

Example

Set the height and width of a element:

Example

Set the height and width of another element:

Note: Remember that the height and width properties do not include padding, borders, or margins! They set the height/width of the area inside the padding, border, and margin of the element!

Setting max-width

The max-width property is used to set the maximum width of an element.

The max-width can be specified in length values, like px, cm, etc., or in percent (%) of the containing block, or set to none (this is default. Means that there is no maximum width).

The problem with the above occurs when the browser window is smaller than the width of the element (500px). The browser then adds a horizontal scrollbar to the page.

Using max-width instead, in this situation, will improve the browser’s handling of small windows.

Tip: Drag the browser window to smaller than 500px wide, to see the difference between the two divs!

Note: If you for some reason use both the width property and the max-width property on the same element, and the value of the width property is larger than the max-width property; the max-width property will be used (and the width property will be ignored).

Example

This element has a height of 100 pixels and a max-width of 500 pixels:

Try it Yourself — Examples

Set the height and width of elements
This example demonstrates how to set the height and width of different elements.

Set the height and width of an image using percent
This example demonstrates how to set the height and width of an image using a percent value.

Set min-width and max-width of an element
This example demonstrates how to set a minimum width and a maximum width of an element using a pixel value.

Set min-height and max-height of an element
This example demonstrates how to set a minimum height and a maximum height of an element using a pixel value.

All CSS Dimension Properties

Property	Description
height	Sets the height of an element
max-height	Sets the maximum height of an element
max-width	Sets the maximum width of an element
min-height	Sets the minimum height of an element
min-width	Sets the minimum width of an element
width	Sets the width of an element

Источник