CODEWITHSUNDEEP
cssheight
Lowlo
Lowlo

Reputation: 255

Parent DIV with min-height and child with percentage height doesn't working

Im experincing some problems with a min-height on a div and its children height. I know what is happening but I don't know how to solve it.

I have this HTML:

<div id="container">
<img src="#"/>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

And the stylesheet:

#container { min-height:180px; max-height:20%;}
#container img { height:60%;}
#container ul { height:40%; padding:10px;}
#container ul li { height:100%; float:left;}

What I'm trying is to apply to the UL, the 40% of the parent. What I get is that the UL is getting the window's height, not its parent. If I put just a max-height or a fixed height, it works.

I supose the problem cames by the time the items are created or something like that, but i'm not sure cause the IMG takes its parent's height

Any solution?

I think that finally I'm getting close to the solution thanks to @Jay-Bee-Why, but I didn't get it.

Case 1- container has height:180px and max-height:20% Then the container flows, and its children to the max-height, but there is no limit on the minimum so, the problem is not solved

Case 2- container has min-height, height, and max-height Here only min-height is working.For example: #container { min-height:100px; height:180px; max-height:20%} Here container's height varies from 100px to 180px. max-height is omitted.

As I explain on the comments, the point I'm looking for is a DIV with a variable height from 180px to 20% of window browser's height wich contains two items. An IMG, with 60% of his parent height, and a UL with 40% inside it, there is a floating LI with 100% of their parent height.

Upvotes: 2

Views: 1856

Answers (1)

Jay Bee Why
Jay Bee Why

Reputation: 568

You should include more detail in your question, including a working image. But take a look at my Fiddle here and you'll see a few possible explanations.

  1. You're applying height:100% to each of your li elements. That means each li is as tall as its parent element, the ul. So right now the content inside the ul is 4x the height of the ul itself, since you have four li in there each the size of the ul. In my Fiddle you can see the bullet points overflowing their parent.

  2. Percentage-based heights (or widths) are based off parent heights. The only height that you've specified in your document is min-height:180px. You'll notice in my Fiddle that your desired percentage-based layout wasn't achieved until I applied an actual height (not a minimum height) to the parent container. Without an actual height value besides height:auto, the browser isn't sure how to calculate the percentage-based height. I should note that this is not the case with width. If you specify only percentages for element width, the browser knows to base its calculations off the browser window.

Upvotes: 0

Related Questions