This question already has answers here:
difference between css height : 100% vs height : auto
(4 answers)
Closed 8 years ago.
I am trying to understand the following
Height: auto; What does this do?
Height: 100%; What does this do?
What is the difference betweem 1 and 2 ? Any examples to explain the difference ?
Thanks in advance!
height: auto; means, the height of the element will increase according to the content it holds, if you assign fixed height, the content overflows, so when you don't know that that your element will contain how much, you set it to auto, so the height will auto increase.
When you set height: 100%; so it will take entire vertical space of the container element, so say for example, when the container element is 200px in height, and you use height: 100%; on the child element, it will be height: 100%; of the container element = 200px.
By default, the element's height is always set to auto unless and until you specify the height using px % or any other unit.
Demo (height: auto;) Keep adding content and your element will expand vertically.
Demo 2 (height: 100%;), this will behave just like you are setting some fixed height to your element, if the content increases, it will overflow. This method only comes handy where you want your child element to take 100% vertical space of the parent container.
height:100%: implies the element is going to have the 100% height of its parent container.
height:auto: means, the element will have flexible height i.e. its height will depend upon the height of children elements of it
Click here for difference with code
reference:http://www.w3.org/TR/CSS2/visudet.html#the-height-property
Content height: the 'height' property
<percentage>
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.
auto
The height depends on the values of other properties. See the prose
below.
Note that the height of the containing block of an absolutely positioned element is independent of the size of the element itself,
and thus a percentage height on such an element can always be
resolved. However, it may be that the height is not known until
elements that come later in the document have been processed.
Negative values for 'height' are illegal.
For example, the following rule sets the content height of paragraphs to 100 pixels:
p { height: 100px }
Paragraphs of which the height of the contents exceeds 100 pixels will
overflow according to the 'overflow' property.
Related
From this post I came to know that absolutely positioned elements do not behave as block level elements.
"Because absolutely positioned elements do not behave as block level elements and do not flow after each other like normal adoes."
From the discussion in comments it seems that absolutely positioned elements are still block-level elements. The only difference is that they do not take the full width of their parent container. I figured out that the same is true for fixed positioned elements too. I tried the following code. In this code two boxes are shown. One is statically positioned and second is absolutely positioned. It can be seen that statically positioned box takes the full width of it's parent container(viewport). But the absolutely positioned box doesn't take the full width of it's parent container(viewport).
<!DOCTYPE html>
<html>
<style>
.abslnowidth {
position: absolute;
display: block;
border: 1px dotted black;
padding: 10px;
background-color: gray;
}
.staticyeswidth {
position: static;
background-color: bisque;
padding: 15px;
border: 1px dotted black;
}
.abslnowidth:hover, .staticyeswidth:hover {
color:red; background-color: yellow;
}
body {
text-align:center;
border: 2px solid darkgreen;
}
</style>
<body style="">
<p>Two boxes are shown below, viz, the gray and bisque colored boxes. The gray colored box is absolutely poistioned and the bisque colored box is statically positioned <br></p>
<div class="abslnowidth">
Absolutely positioned
</div>
<div class="staticyeswidth">
Statically positioned
</div>
</body>
</html>
Note that the the fixed positioned box behaves similar to absolutely positioned box in that that it also doesn't take the full width of it's parent container.
Much to my surprise, I noticed the fixed/absolutely position element doesn't behave like block-level elements even if I explicitly set display: block; It kind of behaves like inline or inline-block elements, as inline or inline-block elements do not take the full width of their parent container.
Precise Question:
Are absolutely/fixed positioned elements still block-level elements?
Do fixed and absolutely positioned elements not take the full width of their container like block elements are supposed to take? If yes then why? If it is defined this way for some specific purpose then what is that purpose. Please note that I'm not asking for unilateral opinion. I mean if someone really knows why this feature exists and what would be the practical downsides, had it been not this way. Or in other words,
Would there be technical downsides to the web-design if the absolutely/fixed positioned boxes were made to take the full width of their container. My guess is that absolutely/fixed positioned block are supposed to be adjusted. E.g. see this code used to make tool-tip. The black tooltip section should not take the whole width of "Hover over me" box because then we'd have to manually set the width of tool tip box. So I think that's a good reason to define absolutely/fixed positioned boxes to not take the width of their container.
Please provide some good reference e.g. w3 official documentation if possible.
This question could have different possible answers depending on what kind of block behavior you're expecting or referring to.
As per your comment above, the following answer refers to the width behaviour of such element.
Normally, block-level elements per default take up the full available width of their container element. However, when you set position: fixed or absolute the element isn't displayed in the same sense as with the rest of the elements.
As per MDN:
A block-level element occupies the entire space of its parent element (container), thereby creating a "block."
As such, the meaning of the container for a block-level element makes alters when refering to absolute or fixed positioned elements. It makes more sense to rather call it the parent.
Since there is no container element to inherit its width, you're seeing it behave more like an inline-block-type element.
Here's what the W3C says for calculating the width of an absolutely positioned, non-replaced element:
The constraint that determines the used values for these elements is:
left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = width of containing block.
If all three of left, width, and right are auto: First set any auto values for margin-left and margin-right to 0. Then, if the direction property of the element establishing the static-position containing block is ltr set left to the static position and apply rule number three below;
This is true. You have not defined any values for width, left nor right nor do they inherit such values. As such they take the default auto. The direction property is indeed ltr as well, so we continue on to rule number three as suggested, which says:
width and right are auto and left is not auto, then the width is shrink-to-fit . Then solve for right.
The shrink-to-fit width rule applies, and goes as follows:
Calculation of the shrink-to-fit width is similar to calculating the width of a table cell using the automatic table layout algorithm. Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. CSS 2.1 does not define the exact algorithm. Thirdly, calculate the available width: this is found by solving for width after setting left (in case 1) or right (in case 3) to 0.
Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).
This question already has answers here:
Responsively change div size keeping aspect ratio [duplicate]
(5 answers)
Height equal to dynamic width (CSS fluid layout) [duplicate]
(9 answers)
Closed 8 years ago.
I'm trying to assign a value for an element's height based on the width value of a browser. For example (what I'm trying to accomplish is in between the double slash)...
.myDiv {
width: 35%;
height: // width * 1.61 //;
}
How can this be done?
You could apply padding-bottom as a percentage. Then put an element inside the div with position absolute.
FYI:
Using percentage value for the width property refers to the width of the container block while the page is rendered.
While for the height property:
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.
- MDN.
So even if you could achieve this with SASS, It doesn't work properly on the browser.
There are couple of solutions on SO, to keep the aspect ratio of a box:
Responsively change div size keeping aspect ratio
Height equal to dynamic width (CSS fluid layout)
Maintain the aspect ratio of a div with CSS
Keep div height relevant to aspect ratio
Why can't you just do this?
.myDiv {
$width: 35%;
width: $width;
padding-bottom: ($width * 1.61)
}
Of course you'll need to make sure that .myDiv is positioned relative to the page, so in other words not contained inside another element with a position attribute.
As #NathanDawson suggests, you could also put another DIV inside myDiv and set the height to 100% if you need a proper height.
I have a div C which height is set up using max-height. This div contains a div D.
I want the contained div D to have the exact same height (and not more) than the containing div C.
If I use the height property for div C, like here
the height of the div C is set up using height: 90%
the height of div D is set up using height: 100%
Then, Everything works fine, and the height of div D equals the
height of div C
If I use the max-height property for div C, like here
the height of the div C is set up using max-height: 90%
the height of div D is set up using height: 100%
Then, the height of div D is not equals to the height of div C (a lot
bigger since the content inside it is very long). In the fiddle, it looks good, but if you inspect div D, you will see it's a lot bigger.
But I need to use the max-height css property, how can I set up the height of div D to be equals to the one of div C only with css?
<div id="container">
<div id="A">
<div id="B">
<div id="C">
<div id="D">
<div id="D1">D1</div>
<div id="D2">
D2 - very long content
</div>
</div>
</div>
</div>
</div>
</div>
Thanks!!!
The reason why things do not work the way you expect is simply because max-height does not set the height of the containing div. All it does is, as its name implies, set a maximum limit to the height of the div.
Here's a quote from the W3 CSS2 specification on how the percentage heights are calculated on block elements. This might help to shed some light on the matter:
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'.
In your case the height of the containing div is not set explicitly and depends on content height, because when you set the max-height of the containing div to 90%, and there is not enough content to stretch the containing div to 90% of the height of its own containing element, the height of the containing div will be less than 90% of the height of its own containing element.
An attempt to explain what I believe is happening
The browser renders the containing div with an initial height of auto, which computes to 0px as there is no content yet. Along comes the contained div which wants to be rendered with a height of 100% of the height of its containing block, the browser realizes that this is ridiculous, as 100% of 0px is exactly 0px again. So it decides to set the height of the contained div to auto instead. If it didn't do so, then the contained div would never be visible, because no matter what happens next, 100% of the containing block's height of 0px is always going to be 0px. Remember that the browser is trying to stick to this part of the rule quoted above:
The percentage is calculated with respect to the height of the generated box's containing block
ONLY NOW along come some more div's which would like to be rendered inside the contained div. At the moment when the previous decisions were made, the browser didn't yet know about these div's, they're a bit late to the party. If the browser was then to backtrack and fix itself up after it had rendered those div's, it would effectively be breaking the part of the rule quoted above. As it would indirectly* be setting the percentage height of the contained div based on the height of its contents.
Because of this the W3 specification people have come up with the second part of the rule. Which lets the browser decide to set the height of the contained div to auto if the height of its containing div is not set (and therefore defaults to auto).
So you could say that those late div's are lucky that the browser has taken some precautions and is still able to render those div's, as it has been preemptive and has set the height of the contained div to auto to accommodate for latecomers.
*by calculating the height of the containing div based on the height of the contents of the contained div, and then basing the percentage height of the contained div on this value.
In conclusion
Browsers are just sticking to the W3 specification, which is a good thing. Your first fiddle works because the browser makers are adhering to the specification, and your second fiddle doesn't work for the exact same reason.
The solution
You can only fix your issue by making sure that the div which you want to have a height of 90% of the browser window is a direct descendant of a div which has its height set to 100% of the browser window. If the ancestor div is not absolutely placed, every ancestor of the div, all the way up to the html document element, would also have to have a height of 100% set on itself.
The line above is true, except if an ancestor is encountered which is absolutely placed (which would take it out of the regular document flow), without this ancestor itself having an ancestor with position: relative set (which would force its absolute positioning to be based on the position of its relatively positioned parent instead of on the height of the browser window), and this ancestor is set to be the height of the browser window (using top: 0px; bottom: 0px;). In that case the running up the DOM tree will stop at the absolutely positioned ancestor.
it's because D is inside of C wouldn't just saying
#D {height: 100%;}
work because that would be telling it to take up 100% of the div it is inside of?
additionally this might help http://css-tricks.com/the-css-box-model/
I am just curious whether it is possible for a HTML control (e.g: a table) to have larger width than its parent(e.g. a div) and the inner control is entirely visible?
Thanks
It is absolutely possible. you can set the overflow css property of the parent element to visible as follows.
.parent {
# Other Properties
overflow : visible;
}
Now in this case if the width of a child element is more than the width of its parent it will be visible. overflow would work for both height and width. To make only the heigth or width visible you can use the overflow-x and overflow-y property (names are based on x-axis and y-axis).
Try This Working JSFiddle
UPDATE:
NOTE: As #cimmanon said the default value of the overflow property is set to visible so you may not need to set it explicitly as above. Though, My personal preference would be to set it explicitly in case i want to be sure of it.
A child's dimensions adapt to its parent element when the child's width is set to a percentage or auto and position is set to static or relative. So, if you want it to be larger, you can do the following things:
Make the child element bigger than the parent (either via width or margins)
Use absolute positioning
Don't let the child element's descendants wrap (tables fit in here)
As long as you aren't changing the ancestor elements to have an overflow that hides things (hidden), the descendants will show through.
Please have a look at this fiddle.
This is a very dumbed-down version of a more complex form. In .dojoxAlertBar, the height is set to 100% for programming reasons. Things are all good, until I set the height for #registerform as a set number:
/* height:117px; */
Without this, the height of the message is "as big as it needs to be". However, uncommenting the 117px height in the CSS has the result of making the height of .dojoAlertBox equal to #registerForm.
Can somebody please explain why that is? I keep on misunderstanding how "height" works in CSS. What does that "100%" actually mean? If it means "100% of the containing element", then why isn't it set as "big" even when there is no specified height for the parent?
In fact, if I can beg, having a simple table of how the height is calculated for fixed/absolute and relative/static elements, that would be great too.
WITHOUT this, the height of the message is "as big as it needs to be".
To give an element (.dojoAlertBar) a percentage height, its parent element (#registerForm) must have an explicit height. Since, in your example, .registerForm has a height of auto, the block will take the height of its content.
However, UNCOMMENTING this has the result of making the comment box as big as the #registerForm...What does that "100%" actually mean?
A height of 100% means the element will have a height that is 100% of its parent. Therefore, the parent div must have an explicit height property. When you give #registerForm the height of 117px, that means .dojoAlertBar will be 100% of that height, or 117px.