I use this css to set a <div> to maximum height
Can anyone give me a general answer, what's the difference between height: 100% and min-height: 100% ?
Here's an explanation from the W3C (link):
The following algorithm describes how the two properties [min-height and max-height] influence the used value of the 'height' property:
The tentative used height is calculated (without 'min-height' and 'max-height') following the rules under "Calculating heights and margins" above.
If this tentative height is greater than 'max-height', the rules above are applied again, but this time using the value of 'max-height' as the computed value for 'height'.
If the resulting height is smaller than 'min-height', the rules above are applied again, but this time using the value of 'min-height' as the computed value for 'height'.
To summarize: Basically, if the min-height is greater than what the height would otherwise be (whether an explicit height is specified or not), then the min-height is used as the height. If the min-height is less than what the height would otherwise be, then the min-height has no effect.
For the specific case you give, specifying height:100% makes the height of the element equal to the height of the containing block. (However this could potentially be overruled, for instance if you also specified max-height:50%.) Specifying min-height:100% means that if the computed height is less than 100%, in fact even if you explicitly specified a height less than 100%, it is treated as if you said height:100%. Note that one key difference is that max-height can overrule height but cannot overrule min-height (because max-height is considered after height but before min-height according to the W3C recommendation as quoted above).
height: 100% will go to 100% of the container height; min-height: 100% should expand past the container's height if it needs too.
Keep in mind that min-height is not supported in IE.
The only practical use I've seen of min-height is sticking a footer to the bottom of the page. Consider the following code:
<html>
<head></head>
<body style="height: 100%">
<div style="height: 100%">
<div style="height: auto; min-height: 100%; background-color: blue;">
<div class="main" style="padding-bottom: 300px;">
</div>
</div>
<div class="footer" style="height: 300px; background-color: red; margin-top: -300px;"></div>
</div>
</body>
</html>
The red is stuck to the bottom of the view port when the main div is empty, and as you fill the main div with content, the red footer still sticks to the bottom of the page.
To illustrate the point, if you just use height: 100% on the main div and fill it up with content, the red footer will hover at the bottom of the viewport. The height specified as 100% doesn't expand the main div outside the bounds of the viewport like it will if you declare height: auto; min-height: 100%.
height will put your element to a size of 100% of it's container.
min-height will put the element to min 100% of the container size
but why would you want to do that anyway? if min-height is 100% it will not have any effect in my opinion...
after some research in IE7 it might give you a solution to a problem:
http://www.search-this.com/2007/02/05/css-min-height-explained/
Related
I am working on my CSS skills and by watching Kevin Powell's video "How to use CSS object-fit to control your images", I couldn't understand why the use of either max-width or width would completely alter the result.
Here's the HTML:
<div class="card">
<img class="card__image" src="//unsplash.it/500" alt="">
</div>
And here is the first CSS code (pay attention to tard .card__image 's width)
.card{
background: lightgreen;
width: 350px;
padding: 3rem;
}
.card__image{
width: 100%;
height: 150px;
}
On the second version of the CSS code, we switch .card__image's width to "max-width".
Now I don't understand why when we use "width", the image is stretched out and takes the entire width of the parent element it's inside of, but when we use "max-width",it's as if it no longer focuses on the parent element but on the image itself. It proportionally fixes the image's dimensions so the image would appear in full/no stretch, inside the parent element.
In result, with "width", the image is stretched out and takes the entire parent element's space. With "max-width", the image is not stretched out and simply takes whichever amount of space it needs to.
How come ?
The difference between width: 100% and max-width:100% is that: First,
width define the width of the specific element while max-width define the
maximum size the element is allow to have link
I was reading a bootstrap css file in which col-md-6 was assigned as
max-width:50%;
After doing it as width instead of max-width the result was same as before so, why do we need to use max-width.
Well, it means that the element won't ever become wider than 50% of its parent element.
So especially in responsive web design, if you define an elements width as width: 300pxand max-width: 50%, it will be 300px on wider screens where the (reponsive) parent can be wider than 600px, and if a smaller screen forces the parent element to become narrower, the child will always remain at 50% of the parent's width, which will then be less than 300px.
.parent {
width: 80%;
background: yellow;
}
.child {
width: 300px;
max-width: 50%;
background: green;
}
<div class="parent">
<div class="child">
content
</div>
</div>
This is how max-width works.
If the content is larger than the maximum width, it will automatically change the width of the element.
If the content is smaller than the maximum width, the max-width property has no effect.
Note: This prevents the value of the width property from becoming larger than max-width. The value of the max-width property overrides the width property.
Source:
https://www.w3schools.com/cssref/pr_dim_max-width.asp
if we set a div to max-with of 50%, then it will limit the content to 50% of the container.
But if we the content is lesser then 50% of the container, then the width of the div will be actual content width.
By the way, max-width is supported by all major browsers including IE7+ so you shouldn't be afraid of using it.
Please go through the below link for details and examples.
https://www.w3schools.com/cssref/pr_dim_max-width.asp
I never had to use this, but sometimes it comes handy... when it works.
Whenever I write the code, sometimes happens that height: 100%; works, and sometimes doesn't.
Why this happens? I suspect I have to edit some other properties, but which?
Taken from w3c, here's their definition:
Specifies a percentage height. 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. Note: For
absolutely positioned elements whose containing block is based on a
block-level element, the percentage is calculated with respect to the
height of the padding box of that element. This is a change from CSS1,
where the percentage was always calculated with respect to the content
box of the parent element.
http://www.w3.org/TR/CSS2/visudet.html#propdef-height
Basically it will take 100% of the height available to it. If the element it is within has a height of 100px, then it will be 100% of 100px. Thus 100px.
If the element with height:100% has position:absolute then it will mean it takes the height of the closest parent element with position:relative or else the height of the visible window.
As pointed out in another answer. This only applies to block elements (or those with display:block applied to them).
I suspect that you observe "sometimes height: 100%; works, and sometimes doesn't" depending on the type of element? Inline elements, such as <span>, <b>, <abbr> and so on does not have height or width. See this example :
body {
height : 400px;
}
span {
height: 100%;
background-color: red;
}
div {
height: 100%;
background-color: green;
}
<span> </span>
<div> </div>
and the result -> http://jsfiddle.net/Ykca3/
even though the <span> is set to height:100%, and its parent have a fixed height, it is not rendered as with 100% height.
I have simple html as follows:
<div style="max-width: 800px; max-height: 300px; background-color: pink;">
text goes here
</div>
The DIV is indeed 800px wide when the page is displayed, but its height remains just enough to hold the text.
I looked at the definitions of max-height and max-width at
http://www.w3schools.com/cssref/pr_dim_max-width.asp
http://www.w3schools.com/cssref/pr_dim_max-height.asp
I cannot seem to find the difference.
Is there any way I can set the height of a DIV to its max height at play display? Or I have to just use the height property?
Thanks and regards.
A div's width is 100% by default if it has content in it. While height takes on only its content's height unless specified differently. See this fiddle for an example: JS Fiddle
I know that min-height: 100% will only work to take up a minimum of 100% of its parent element's height if the parent element has some numeric value for height, but what if I have a few nested divs and I want them all to have a min-height of 100%? I tried min-height:inherit but that didn't work either? I know I can probably solve this problem with JavaScript by simply checking the browser height value on document load and then assigning that to the min-height property of my nested divs, but I'd like to know if it would be possible to solve this with just css?
Edit: I should also mention that I need my outer most div and my nested divs all to have a min-height of 100% such that they take up at least the height of the browser, but expand if needed.
min-height: inherit; should work: http://jsfiddle.net/ugxbs/
EDIT
As for percentage values and the expected behavior, there is no logic behind nested min-height. What you should do is to use the height property for all parents, then add min-height to the inner most DIV.
F.ex:
<html>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
CSS:
html, body, .outer { height: 100% }
.inner { min-height: 100%; }
http://jsfiddle.net/4PsdT/
This way, you are telling the browser to set all outer elements from the top (HTML) to a height of 100%. This will make these elements stretch across the browser height. Then just add a min-height to the inner most element that contains the content.
Setting a height doesn’t mean that it’s children’s excessive content will fall out, unless you add overflow:hidden;.
I can make it work with the property height but not min-height.
http://jsfiddle.net/zDVqm/