How can I make a div 100% of window height?
tl;dr - add html, body {height:100%;}
to your CSS.
Percentage values in CSS are inherited from some ancestor that already has height declared. In your case, you need to tell all parents of your sidebar to be 100% height. I'm assuming that #sidebarBack
is a direct child of body
.
Essentially, your code above is telling #sidebarBack
to be 100% height of its parent. Its parent (we are assuming) is body
, so you need to set height: 100%;
on body
as well. We can't stop there, however; body
inherits height from html
, so we also need to set height: 100%;
on html
. We can stop here, because html
inherits its properties from viewport
, which already has a declared height of 100%
.
This also means if you end up putting the #sidebar
inside another div
, then that div
also needs height:100%;
.
Here is an Updated JSFiddle.
Changed your CSS to:
html, body {
height:100%;
}
#sidebar {
background: rgba(20, 20, 20, .3);
width: 100px;
height: 100%;
left: 0;
float:left;
}
section#settings {
width:80%;
float:left;
margin-left:100px;
position:fixed;
}
Make Div Element 100% Height of Browser Window Using CSS
Is this what you want?
html, body { height: 100%; margin: 0;}#thediv{ min-height:100%; min-width:100%; background-color:red; display:flex; align-items:stretch; position:relative;}.interiordiv{ background-color:blue; width:50px; margin:15px auto 15px auto;}
<div id="thediv"> <div class="interiordiv">A</div> <div class="interiordiv">V</div> <div class="interiordiv">C</div> <div class="interiordiv">D</div> <div class="interiordiv">E</div></div>
Make div take 100% of browser window height
If you want to achieve a 100 view height (device height) styling on a div or other elements you can use something like this:
.full-height { height: 100vh;}.full-width { width: 100vw;}div { background: green;}
<div class="full-height full-width"></div>
Make body have 100% of the browser height
Try setting the height of the html element to 100% as well.
html,
body {
height: 100%;
}
Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have its height set as well.
However the content of body will probably need to change dynamically.
Setting min-height to 100% will accomplish this goal.
html {
height: 100%;
}
body {
min-height: 100%;
}
Set div height to window height
Removing the margin and padding will help, you can also add box-sizing: border-box;
to account for borders and padding when setting widths. Also I'm not sure if you wanted to make your footer stick to the bottom of the page, but I did that along with the other fixes in this fiddle:
http://jsfiddle.net/ob1g0752/2/
Related Topics
How to Hide Link Information At the Bottom Left/Right of the Browser on Hover
How to Put Arrow Between Two Divs Using HTML and CSS
Background Size for Mobile Devices
How to Customize the Validation of Input Type File Image
Where Is the Extra Space Coming from Around This Textarea
How to Make the Height of the Div Dynamically Fit the Size of the Div in Which It Is Contained
How to Make Flex Box Work in Safari
How to Give Multiple Conditions in *Ngif Statement in Angular 6
Line Break in HTML Select Option
How to Vertically Align Text in Input Type="Text"
Html - How to Get My Text Next to My Icon
Css Height 100% Is Not Always Equal to the Direct Parent
How to Make HTML Table Cell Editable
How to Allow Http Content Within an Iframe on a Https Site
Why Doesn't Height: 100% Work to Expand Divs to the Screen Height