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
Related
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
If I have an image on a page with width set to 100% in css it is as wide as the browser. Fine. However, if I make a containing div have display:inline-block, then the image is no longer set to have a width:100%. Instead, it just shows as the actual width of the image:
img {width:100%;}
<img src="http://www.gannett-cdn.com/-mm-/0c9109c71ea0524d9fe840f91fabd67bb94a26a9/r=537&c=0-0-534-712/local/-/media/USATODAY/USATODAY/2013/05/30/1369920769000-grumpycat-1305300933_3_4.jpg"/>
<div style="display:inline-block;">
<img src="http://www.gannett-cdn.com/-mm-/0c9109c71ea0524d9fe840f91fabd67bb94a26a9/r=537&c=0-0-534-712/local/-/media/USATODAY/USATODAY/2013/05/30/1369920769000-grumpycat-1305300933_3_4.jpg"/>
</div>
So, basically, the inline-block containing div wants to be as wide as its contents, and the width:100% on the image wants to be as wide as the containing element, so it seems they are both confused and just defaulting to the width of the image. I know I can set the width of the containing div to be 100% and have the desired outcome, but for what I am actually doing, that is not an option. Is there any way to force the img to be 100% width with only css on the image itself? I guess I am basically trying to set a class on a parent of an element, which I do not think is possible... Ideas?
This is because a percentage value on width is relative to the width of the box's containing block. While a block-level container (<div> element, for instance) takes the entire width of its containing block, an inline-level element doesn't.
Therefore you have to specify the width of the wrapper <div> explicitly. As a thumb rule, when you say 100% you should ask yourself 100% of what?
img { width:100%; }
div { display:inline-block; width: 100%; }
<img src="http://www.gannett-cdn.com/-mm-/0c9109c71ea0524d9fe840f91fabd67bb94a26a9/r=537&c=0-0-534-712/local/-/media/USATODAY/USATODAY/2013/05/30/1369920769000-grumpycat-1305300933_3_4.jpg"/>
<div>
<img src="http://www.gannett-cdn.com/-mm-/0c9109c71ea0524d9fe840f91fabd67bb94a26a9/r=537&c=0-0-534-712/local/-/media/USATODAY/USATODAY/2013/05/30/1369920769000-grumpycat-1305300933_3_4.jpg"/>
</div>
Alternatively, in cases where you want to set the width of elements as the width of the viewport/window, you could use viewport percentage units instead. For instance:
img { width: 100vw; } /* 1vw = 1/100 of the width of the viewport */
Demo:
img { width: 100vw; }
<img src="http://www.gannett-cdn.com/-mm-/0c9109c71ea0524d9fe840f91fabd67bb94a26a9/r=537&c=0-0-534-712/local/-/media/USATODAY/USATODAY/2013/05/30/1369920769000-grumpycat-1305300933_3_4.jpg"/>
<div>
<img src="http://www.gannett-cdn.com/-mm-/0c9109c71ea0524d9fe840f91fabd67bb94a26a9/r=537&c=0-0-534-712/local/-/media/USATODAY/USATODAY/2013/05/30/1369920769000-grumpycat-1305300933_3_4.jpg"/>
</div>
I dont think this will help your problem , but technically you could do it by giving it position:absolute;
img {
width:100%;
}
div img {
position:absolute;
margin:0 auto;
width:100% !important;
}
http://jsfiddle.net/kjf8s3rq/
The problem is that you are trying to use dislay-inline in a way contrary to its intended use. If you want the image to take up the full width of the window, then clearly its container must also take up the full width. Which means you want your div to behave like a block element. So the solution is either to do just that and leave the div as display:block (its default value to start with), or at the very least you must set it's width to width:100%. Afterall, if you want to take up the full width of the screen then you want it to be a block.
Inline-block elements have to have their width set, either by specifying a width in the CSS, or by letting them take up as much width as they need to hold their content. In your case the image has its natural size, and your surrounding inline-block div is therefore taking up just that size and no more.
Setting width:100% on the image doesn't change that; that just tells it to take up the full with of its container, not the whole window. But your containing div is already the natural size of the image.
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/
I want a top margin for my webpage of say 100px when the window is maximised, but if the user resizes the window to shrink it I want this margin to shrink. The margin should have a minimum size of say 10px and should shrink in proportion to the window height.
An example if what I am trying to emulate is http://www.bing.com/
How would I go about implementing this in CSS? I'm stuggling with min-height, min-width, height and width at the moment.
Thanks.
Without seeing some code, it's difficult to give a great suggestion. But, you can style the html and body to be 100% height which should actually conform to the height of the viewable portion of the browser:
html, body{ margin:0; padding:0; height:100%; }
From there, you can add a div directly into the body and give that a height that is a percentage:
#push{ height: 15%; }
Your body html would look something like:
<body>
<div id="push"></div>
<div>
asdf asdf
</div>
</body>
When the body height changes, so will the push height. You may need to tweak that number to get it to your liking. You can also give the push a min-height, but that is not supported in IE6. Also, that 100% html / body could give you trouble later depending on how you're doing your footer and things, so beware and good luck.
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/