Css element parent height

CSS height Property

The height of an element does not include padding, borders, or margins!

If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly.

If height is set to a numeric value (like pixels, (r)em, percentages) then if the content does not fit within the specified height, it will overflow. How the container will handle the overflowing content is defined by the overflow property.

Note: The min-height and max-height properties override the height property.

Default value:	auto
Inherited:	no
Animatable:	yes. Read about animatable Try it
Version:	CSS1
JavaScript syntax:	object.style.height=»500px» 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
auto	The browser calculates the height. This is default	Demo ❯
length	Defines the height in px, cm, etc. Read about length units	Demo ❯
%	Defines the 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

More Examples

Example

Set the height of an element to 50% of the height of the parent element:

Источник

How to Use CSS to Set the Height of an HTML Element to 100%

Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML.

Jessica Kormos is a writer and editor with 15 years’ experience writing articles, copy, and UX content for Tecca.com, Rosenfeld Media, and many others.

Percentage values in CSS can be tricky. When you set the height CSS property of an element to 100% what exactly are you setting it to 100% of? That’s the major question you run into when dealing with percentages in CSS, and as layouts become more complex, it becomes that much more difficult to keep track of percentages, resulting in some downright bizarre behavior, if you aren’t careful.

Working with percentages does have a distinct advantage; percentage-based layouts automatically adapt to different screen sizes. That’s why using percentages is essential in responsive design. Popular grid systems and CSS frameworks use percentage values to create their responsive grids.

Clearly, there are certain situations better suited to static values and others that work much better with something adaptive, like percentages. You’ll need to decide which route to take with the elements in your design.

Static Units

Pixels are static. Ten pixels on one device is ten pixels on every device. Sure, there are things like density and the way a device actually interprets what a pixel is, but you won’t ever see major changes because the screen is a different size.

With CSS, you can easily define an element’s height in pixels, and it will remain the same. It’s predictable.

That won’t change unless you alter it with JavaScript or something similar.

Now, there’s another side to that coin. It won’t change. That means you’ll need to measure out everything precisely, and even then, your site won’t work across all devices. That’s why static units tend to work better for child elements, media, and things that will start to distort and look strange if they stretch and grow.

Setting an Element’s Height to 100%

When you set an element’s height to 100%, does it extend to the entire screen height? Sometimes. CSS always treats percent values as a percentage of the parent element.

With No Parent Element

If you’ve created a fresh that’s only contained by your site’s body tag, 100% will probably equate to the screen’s height. That is unless you defined a height value for the .

Источник

HTML: Give Parent Div 100% Height Of Child Floated Elements

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown SEO.

Many web designers and front end developers have been stumped by this dilemma before.

When you have a parent div with only floated child elements inside, how do you give the parent element the height of the floated child elements?

Before we look at the answer, let’s look at why this is a problem in the first place.

Understanding Floats

When we float elements with CSS, what we’re doing is taking those elements out of the normal flow of the page.

A floated HTML element will bump all the way to the right or left edge of it’s containing element (depending on what direction you float it) — or to the edge of another floated element.

The problem this creates with a parent HTML element that only contains floated children elements is the resulting height is no longer auto , but instead renders as height: 0 .

Practical Applications

Imagine your parent element has a different background color than the preceding or subsequent sections. Or, imagine that you are trying to create white space by using margin or padding , but you’re not seeing the results you want, because the parent element has an effective height of zero.

How do we solve this?

There are a couple of methods that work. Let’s look at some HTML and CSS that may look similar to yours, and work from there.

Where We’re Starting From

Here’s some boilerplate HTML and CSS. In our example, we have a parent element with two floated child elements.

 /* The CSS you're starting with may look similar to this. * This doesn't solve our problem yet, but we'll get there shortly. */ .containing-div < background-color: #d2b48c; display: block; height: auto; >.floating-div < float: left; width: 50%; >.floating-div ul

In our current example, the background color of the parent element doesn’t cover the full height like it should because the child elements are floated.

Solution #1: overflow: auto

A solution that works in all modern browsers and in Internet Explorer back to IE8 is to add overflow: auto to the parent element. This also works in IE7, with scrollbars added.

 /* Our Modified CSS. * This is one way we can solve our problem. */ .containing-div < background-color: #d2b48c; display: block; height: auto; overflow: auto; /*This is what we added!*/ >.floating-div < float: left; width: 50%; >.floating-div ul

Solution #2: Float Parent Container

Another solution that works in all modern browsers and back to IE7 is to float the parent container.

This may not always be practical, because floating your parent div may affect other parts of your page layout.

 /* Modified CSS #2. * Floating parent div. */ .containing-div < background-color: #d2b48c; display: block; float: left; /*Added*/ height: auto; width: 100%; /*Added*/ >.floating-div < float: left; width: 50%; >.floating-div ul

Method #3: Add Clearing Div Below Floated Elements

 /* * CSS to Solution #3. */ .containing-div < background-color: #d2b48c; display: block; height: auto; >.floating-div < float: left; width: 50%; >.floating-div ul < display: inline-block; height: auto; >/*Added*/ .clear

This works in old browsers as well as new. Some designers and developers may choose not to use this method, because it is not semantic. But it works.

Method #4: Add Clearing Div To The Parent Element

 /* * CSS to Solution #4. */ .containing-div < background-color: #d2b48c; display: block; height: auto; >.floating-div < float: left; width: 50%; >.floating-div ul < display: inline-block; height: auto; >/*Added*/ .clearfix < clear: both; >.clearfix:after

This solution is pretty bulletproof for older browsers and newer browsers alike.

Conclusion

No matter what solution you use to give parent elements the full height of the floated elements, test it for your particular page layout.

John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown SEO.

Here are more articles on Web Design you might like.

Change the Bullet Color of a List Item with CSS

Code Highlighting via Prism.js

CSS: Using :nth-of-type() To Style Repeating Items

Ordered Lists With A Different Color For Numbers

11 comments on “ HTML: Give Parent Div 100% Height Of Child Floated Elements ”

Awesome post, John. Well tackled.
I tend to use Method#2 where possible, although I think Method#4 would be the most robust for browser support (and semantics). Great series of posts, by the way!

CJ! Haven’t seen you around in a while. How have you been? I actually use overflow: auto where I can, but adding a clearfix div to the bottom of the parent div, or self-clearing the parent seems to be more bulletproof than floating the parent element or the overflow technique for backwards compatibility.

Thanks Mark Chouinard for catching the typo in the headline of the fourth code sample. I appreciate you pointing it out so I could correct it. \m/

Hey nice article. I’m going to use this for work, I however I am not clear how #4 works. I tried it and it worked but I’m just curious. Can you expand on that? Thanks,
Imran

Hi Imran: I get the sense that solution #4 works in a similar way to #3, by creating an element (in this case a pseudo-element) with clearfix CSS attached. This forces the parent element to take on the height of the child elements.

Have you looked into flex? Wow it solves a lot of problems. I use it now instead of floating divs around. Actually I use bootstrap, which makes web design so much easier. Boostrap 4 uses flex and it is amazing.

Hi John: Yes, I’ve been using Flexbox for, gosh, probably the last three years. I need to add that as another method. Thanks for the reminder. I’ll put it on the to-do list for updating this article. Thanks,
John

This will work for floated elements, I wonder, what will fix the same issue, in case of position absolute elements.

Hi Akshay: As far as I know, position: absolute removes the element from the normal flow, so any height that would be added to the parent element would be ignored. These days, I usually use display: flex; justify-content: space-between; to create a parent element that contains all elements and creates equal height. If you have an absolutely positioned element, within a parent element, you’d likely have to do calculations based on any relatively positioned elements in the parent element. – John

Источник

How to create same height div as parent height

Hello artisan,
Today in this blog post I am going to show you how to create same height as parent height div’s. In most of the cases we need to create a div with same height, because if the div has paragraph of unequal length the div will look so wierd which is not good. So make the div of same height we will refer the following code. Before going further follow me for more posts

Snehal Rajeev Moon Follow

  Example of same height div with its respective parent height  class="container">  class="child-div-1"> Div 1