Menu
According to specifications for height the element's containing box needs to have an explicit height in order for percentage height to work on the element (i.e. a numerical value of 100% height used on all parent containing boxes).
However why do the same rules not seem to apply for percentage widths? When I set a percentage width on an element with a containing box that has no explicit width, it still seems to change the width of the element. (see example)
.first {
background-color: teal;
}
.second {
background-color: gold;
width: 30%; /* the '.second' box becomes narrower! */
height: 40%; /* <-- doesn't have any effect */
}<div class="first">
""
<div class="second">
""
</div>
</div> 
856
The <percentage> CSS data type represents a percentage value. It is often used to define a size as relative to an element's parent object. Numerous properties can use percentages, such as width , height , margin , padding , and font-size .
Answer is No. cause 100 is pixels and 100% is percentage of overall size of page.
It seems like this should be one of the easiest things to understand in CSS. If you want a block-level element to fill any remaining space inside of its parent, then it's simple — just add width: 100% in your CSS declaration for that element, and your problem is solved.
Width: autoWhen an element has auto as a value for width, it can have margin, padding, and border without becoming bigger than its parent element. The width of its content box will be the content itself with the subtraction of margin, padding, and border.
Non-replaced block-level elements which are in normal flow take the width of their parent.
Well, that's a lie-to-children!
In order to understand what happens under the hood, we should start from how width of a non-replaced block-level element is calculated.
10.3.3 Block-level, non-replaced elements in normal flow
The following constraints must hold among the used values of the other properties:
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
[...] If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' follows from the resulting equality.
Due to the fact that the initial value of width property is auto, the width of a block-level element would be the same as its containing block.
<html> is a block-level element and it lives in the initial containing block.
The initial containing block is a rectangular box which takes the width of the viewport. Hence the width of <html> element would be equal to the width of the viewport.
On the other hand, the containing block of <body> element is generated by <html>. Therefore they would have equal widths as well.
<body> itself establishes a containing block for its block-level children. And that's why a <div> element in normal flow will take the width of the viewport.
W3C indicates it better:
With no positioning, the containing blocks (C.B.) in the following document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Illustration of containing blocks</TITLE>
</HEAD>
<BODY id="body">
<DIV id="div1">
<P id="p1">This is text in the first paragraph...</P>
<P id="p2">This is text <EM id="em1"> in the
<STRONG id="strong1">second</STRONG> paragraph.</EM></P>
</DIV>
</BODY>
</HTML>
are established as follows:
For box generated by C.B. is established by
html initial C.B. (UA-dependent)
body html
div1 body
p1 div1
p2 div1
em1 p2
strong1 p2
However that is not true for height of non-replaced block-level elements (which are still in normal flow!):
10.6.3 Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'
[...] If 'height' is 'auto', the height depends on whether the element has any block-level children and whether it has padding or borders.
[...] Only children in the normal flow are taken into account (i.e., floating boxes and absolutely positioned boxes are ignored, and relatively positioned boxes are considered without their offset).
The initial value of height is auto, therefore if the block-level element doesn't have any block-level children, padding or border, the computed value of height would be 0.
That's true even for <html> element.
162
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
