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.
Related
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.
In my jsp, I have a div whose width is determined by a javabean value. Basically it is being used to fill a bar. Some times the values are greater than 100, so the width becomes 300% (for example), thus going out of the parent's boundary.
I need to know, how I can limit the child div's width so that it doesn't exceed the parent boundary.
Thank you.
I just used a combination of the previous responses and it worked for me.
In my case I din't want to hardcode any pixel values but leave my child element fluid to grow and shrink to its parent element width.
Used for parent overflow: hidden; and for the child width: 100% !important;
Also noticed that the child doesn't have to be the direct child of the parent for this to work. For the record, my parent element is a Flex Container with flex-basis: 66%; which translates to a relative width in the Flexbox concept.
Apply the following CSS to the parent div:
overflow: hidden;
Or you might want to try the CSS max-width property on the child-div.
You can use width:100% !important on child div.This means it will fill only the parent div space only.
Alternatively you can also go for max-width and min-width concept.
First post on this platform :)
I'm currently having an issue with percentage positioning. The style and the computed style are showing a different value for the top property of my element:
the value I see in the computed style is in pixels instead of in % as defined in the stylesheet
the value is different: if I replace the style with the computed style, the element moves down of about 40 pixels.
Here is my code:
<div id="container">
<img id="img1" />
<img id="img2" />
</div>
#container { position:relative; display:inline-block;}
#img1 { position:relative; }
#img2 { position:absolute; top:40% }
img1 is 600px high. Since it has a relative positioning, container gets its height. So container is 600px high. If I do the math, top position of #img2 in pixels should be 240px.
But computed style is giving me 280px. Why?
This thing happens for almost all children in my container and it is driving me nuts!
Does anyone have an idea of what's happening?
From MDN:
getComputedStyle() gives the final used values of all the CSS properties of an element.
Computed style values will always be absolute values as they represent the state of a given element after the browser has finished applying CSS.
https://developer.mozilla.org/en-US/docs/Web/API/window.getComputedStyle
https://developer.mozilla.org/en-US/docs/Web/CSS/used_value
Edit
Now that you've provided code, I can answer your specific issue.
Set display: block on #container and your images.
The computed value is relative to the containing document, not to the immediate parent of the element. If you take a screenshot and measure the distance from the top of #container down to the top of #img2 you should see that it's correctly 240px. However, the computed value of top for #img2 won't necessarily be 240px.
Here's a demo. The blue rectangle is absolutely positioned at top: 40%; which correctly renders 240px down in its 600px container, but if you look at the computed value for top it'll report a different value because it's relative to the top of the viewport, which has margins set on the body.
Can you help me with my dilemma? I have a container (BODY in this case) that has position:relative set. Inside it I have two div's. One relative and one absolute positioned (in this order).
The problem is that whenever I set some margin-top to the relative positioned element, the container's height (body in this case) stretches vertically.
For example, even though I have set height: 100% to the container, its size when viewed is 100% + the margin-top of the relative positioned child element.
Here's a fiddle:
http://jsfiddle.net/xJ75R/7/
First of all, you should not give a relative position to the body, since body takes up the whole page.
Anyway, be specific when applying the relative position to another element, so if you have a class of "lists" then use
.lists { position: relative; top: something; left: something }
or margin, or whichever rule.
If you are just having problems with the body tag after giving some margin to ANOTHER element (though I do not see how this would happen), then give the body a margin of 0, like:
body { margin: 0; }
and if that doesn't work then use !important like
body { margin: 0 !important; }
On a side note, use firebug addon for firefox to make your CSS life easier and see what's happening on the fly.
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/