Why doesn't height: 100% work to expand divs to the screen height?
In order for a percentage value to work for height, the parent's height must be determined. The only exception is the root element <html>
, which can be a percentage height. .
So, you've given all of your elements height, except for the <html>
, so what you should do is add this:
html {
height: 100%;
}
And your code should work fine.
* { padding: 0; margin: 0; }html, body, #fullheight { min-height: 100% !important; height: 100%;}#fullheight { width: 250px; background: blue;}
<div id=fullheight> Lorem Ipsum </div>
Div height 100% and expands to fit content
Here is what you should do in the CSS style, on the main div
display: block;
overflow: auto;
And do not touch height
CSS div height 100% not working
You could set the height of parent div1
to 1000px
and set the children's height to :inherit
.
Here's an example:
#div1{ width:1024px; height:1000px; background:red; overflow:hidden;}#div2{ float:left; width:100%; height:inherit; background:yellow;}#div3{ float:left; width:460px; height:inherit; background-image:url('http://www.ricoh-imaging.co.jp/english/r_dc/caplio/r7/img/sample_04.jpg'); background-size:100% 100%; background-position:bottom; background-repeat:no-repeat;}
#div4{ float:left; width:270px; height:inherit; background:violet;}
#div5{ float:left; width:25px; height:inherit; background:black;}
#div6{ float:left; width:269px; height:inherit; background:blue;}
<div id="div1" class="center"> <div id="div2"> <div id="div3"></div> <div id="div4"></div> <div id="div5" ></div> <div id="div6"></div> </div></div>
Div with 100% height overflowing body in Chrome
The problem seems to stem from the fact that you're combining both the height
and flex-basis
properties in the same declaration block. It appears to create a conflict. In my answer below I've removed the heights and used flex-basis
instead. You'll note a couple of other adjustments, as well.
Change:
(1)
<div class="green-border"
style="flex: 1 1 auto; display: flex; flex-direction: row; width: 100%; height: 100%;" >
TO
<div class="green-border"
style="flex: 1 1 100%; display: flex; flex-direction: row; width: 100%;" >
notes: removed height
; used flex-basis
instead;
(2)
<div style="flex: 1 1 auto; width: 100%; height: 100%;">
TO
<div style="flex: 1 1 100%; width: 100%; display: flex;">
notes: removed height
; used flex-basis
instead; established nested flex container;
(3)
<div style="background-color: #ff6500; width: 100%; height: 100%;">center</div>
TO
<div style="background-color: #ff6500; width: 100%; flex: 1 1 100%;">center</div>
notes: removed height
; used flex-basis
instead; added flex
property;
Lastly, the blue border wasn't showing due to a typo.
(4)
clsas="blue-border"
TO
class="blue-border"
With the adjustments above, the layout renders in Chrome like this:
All boxes lie within their containers.
DEMO
Applying 100% height to nested, non-flex elements
In most cases, when using percentage heights on child elements, a percentage height must also be specified for the parent element and all ancestor elements, up to and including the root element.
html, body { height: 100%; }
I have explained the reason for this here:
- Working with the CSS
height
property and percentage values
But a close look at the spec reveals an exception:
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'.
Note the part: ... and the element is not absolutely positioned.
Hence, try this on the "center" box:
Change:
(5)
<div style="background-color: #ff6500; width: 100%; flex: 1 1 100%;">center</div>
TO
<div style="background-color: #ff6500; width: 100%; flex: 1 1 100%; position: relative;">
<div style="border: 5px solid yellow; position: absolute; height: 100%; width: 100%;">
center</div>
</div>
Notes:
- added
position: relative
to establish nearest positioned ancestor for absolute positioning - created new, nested, non-flex
div
container - applied absolute positioning to new
div
withheight: 100%
.
With absolute positioning you do not need to apply percentage heights to parent containers.
DEMO
CSS: 100% Height Issues
An element positioned absolute doesn't affect the wrapping elements in any way. So the height of your div#static-maincontent doesn't really translate to div#static-content... it just floats above all other elements.
- Remove all position:absolute
- give div#sidebar a float:left
- give div#static-maincontent a float:right
- add something like <div style="clear:both;"> after div#static-maincontent and INSIDE div#static-content
- remove height: 100% from div#static-content
This should work (at least with firebug).
How to force child div to be 100% of parent div's height without specifying parent's height?
NOTE: This answer is applicable to legacy browsers without support for the Flexbox standard. For a modern approach, see: https://stackoverflow.com/a/23300532/1155721
I suggest you take a look at Equal Height Columns with Cross-Browser CSS and No Hacks.
Basically, doing this with CSS in a browser compatible way is not trivial (but trivial with tables) so find yourself an appropriate pre-packaged solution.
Also, the answer varies on whether you want 100% height or equal height. Usually it's equal height. If it's 100% height the answer is slightly different.
Why div is not taking full height on mobile divice
You need to add flex-direction: column
to main
. And use flex-grow: 1
to main-content so it covers the remaining space ( if you want that )
The default property value is row
. So main and sidebar are side by side and equal in height which is equal to the height of their container( default flex behavior )
.main { min-height: 100vh; background-color: red; display: flex; flex-wrap: wrap; flex-direction:column;
}
.sidebar { background-color: blue; height: 100px; width: 100%;}
.main-content { background-color: yellow; flex-grow:1; width: 100%;}
@media (min-width:768px) { .main-content{ width: 80%;} .sidebar { width: 20% } .main { flex-direction:row; }}
<div>Header</div><div class="main"> <div class="sidebar"> sidebar </div> <div class="main-content"> main-content </div></div>
Related Topics
How to Horizontally Center-Crop Div Inside Other Div
How to Make a Simple Modal Window
Compass-Style (Ruby) Encoding Error
Display Two Object Same Real Distance (E.G. Inches) Apart Across Different Browers/Screen Sizes
CSS Layout Help - Stretch Div to Bottom of Page
How to Change The Font of Some Textoutput Elements
Vertical-Align: Middle with Bootstrap 2
Iframe Z-Index for Drop Down Menu
Adding Dynamic Class Name in Svelte
How to Calculate CSS Zoom Factor in Dependence on Screen Width
Why Doesn't The Wrapper Div Wrap The One and Two Divs? (In Firefox Browser)
How to Style Contenteditable in Firefox
Incompatible Units: 'Rem' and 'Px' with Bootstrap 4 Alpha 6
Sass Image CSS Cache Busting (Via Compass)