I am applying max-height to nested divs? but it is not working as expected root element working is perfect but child height not applying?
<div style="max-height: calc( 33% - 10px);">
<div style="height:30px;"></div>
<div style="max-height: calc( 100% - 30px);">
//height not applying
</div>
</div>
Unfortunately, percentage heights are calculated from the explicitely specified height of the parent element, not its actual height. If height is not set, it is auto, which can't be used for percentage. Only Opera 12- (Presto) calculates percantage min-height from the specified min-height directly.
Assuming you don't care about old browsers (since you use such modern features like calc()), I'd suggest to try Flexbox for this layout.
Related
Is there any way to have the CSS transform: scale(n) attribute scale relative to the size of the parent container. For example:
<div id="divA" class="mycontainer">
<div id="divB" style="width: 100px"></div>
</div>
The idea being that if 'divA' is 200px (default size), then 'divB' would maintain its 100px, but if 'divA' was 100px, then 'divB' would become 25px.
The reason I am not specifying percentages in this example is because we need to adjust for third-party components that have their own CSS rules. Redefining them all would lead to a maintenance challenge.
bit confused about heights of nested containers in html/css.
for ex. in this case -http://jsfiddle.net/Y59a7/ if inner2 and inner1 have explicit
height 100%, then height:100% appears to work orelse it looks like the one in fiddle.
<div class="container">
<div class="inner1">
<div class="inner2">
<div class="inner3">
asdlfalsjdflk
asldkflaflkjkalf
</div>
</div>
</div>
</div>
Here's how to think of it:
inner3 will have a height that's equal to 100% of the height of it's containing div (inner2).
But how does inner2 calculate its height? As, in your example, inner2 does not have an explicit height set, its height will be the minimum height required to display its content. (Taking padding and margins into account).
So inner3 will have the height of inner2, and the height of inner2 will be the natural height of inner3.
try this demo
{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
If you want inner3 takes up 100% of height, then all parents' height need to be set to 100%, even body and html
I have the following structure
<div class="container">
<div class="wrapper">
<img class="image">
<div class="child-2"></div>
<div class="child-3"></div>
</div>
</div>
container has fixed height and width.
It's responsive design, so the image will scale to fit inside of container with max-height and max-width set to 100%.
child-1 and child-2 need to be positioned on top of the image at specific spots. To achieve that, I made wrapper have max-height and max-width of 100% too, so it wraps itself around the image. Then I can place child-1 and 2 relative to wrapper.
In WebKit, it works beautifully, in FF and Opera however, it doesn't. They don't respect the max- at all.
Per spec, if <div class="wrapper"> has auto height, then a percentage max-height on its children should behave the same way as auto max-height. Sounds like FF and Opera are following the spec and WebKit is not...
I am designing a fluid layout (no fixed px, all in %)
I have the HTML as;
<div class="parent">
<div class="fl child"><a class="prev"></a></div>
</div>
If I check in Firebug, the height of parent is calculated as 400px..But if I give child as height:100%, it does not take the entire height..
How do I fix this?
Unfortunately heights don't work so well with percentages, you can take a look at the min-height css property but you may need to employ some javascript.
I want to make a container automatically expand. To do so I want to use max-height property. This is my html structure
<div class='palm-row first' style="max-height:200px">
<div class="palm-row-wrapper">
<div class="textfield-group" x-mojo-focus-highlight="true"
style="max-height:200px">
<div class="title">
<div class="truncating-text" id="nameField" class="recipient-picker"
x-mojo-element="TextField" style="max-height:200px"></div>
</div>
</div>
</div>
</div>
.recipient-picker{
overflow:hidden;
margin-right:0px;
max-width:300px;
padding-right: 4px;
}
I want the textfield to expand in height. However it does not work settings max-height. The container do not change height. However when I set min-height, the correct height is applied.
Any ideas how to achieve this? Any other ideas?
max-height sets the maximum height of an element if it tries to grow past that size. min-height sets the minimum height of an element if it tries to grow below that size. In your case, the default textfield height is less than your specified min-height, so the browser will increase it's height so that the min-height constraint is satisfied.
So what's the problem with just using min-height if it works?