Menu
The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent. Example 1: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.
Answer: Set the 100% height for parents too And we all know that the default value of the height property is auto , so if we also set the height of <body> and <html> elements to 100%, the resulting height of the container div becomes equal the 100% height of the browser window.
Simply add height: 100%; onto the #B2 styling. min-height shouldn't be necessary.
Suppose you have
<body>
<div id="root" />
</body>
With normal CSS, you can do the following. See a working app https://github.com/onmyway133/Lyrics/blob/master/index.html
#root {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
With flexbox, you can
html, body {
height: 100%
}
body {
display: flex;
align-items: stretch;
}
#root {
width: 100%
}
http://jsfiddle.net/QWDxr/1/
Use the "min-height" property
Be wary of paddings, margins and borders :)
html, body {
margin: 0;
padding: 0;
border: 0;
}
#B, #C, #D {
position: absolute;
}
#A{
top: 0;
width: 100%;
height: 35px;
background-color: #99CC00;
}
#B {
top: 35px;
width: 200px;
bottom: 35px;
background-color: #999999;
z-index:100;
}
#B2 {
min-height: 100%;
height: 100%;
margin-top: -35px;
bottom: 0;
background-color: red;
width: 200px;
overflow: scroll;
}
#B1 {
height: 35px;
width: 35px;
margin-left: 200px;
background-color: #CC0066;
}
#C {
top: 35px;
left: 200px;
right: 0;
bottom: 35px;
background-color: #CCCCCC;
}
#D {
bottom: 0;
width: 100%;
height: 35px;
background-color: #3399FF;
}
If you're gonna use B2 for styling purposes you can try this "hack"
#B { overflow: hidden;}
#B2 {padding-bottom: 9999px; margin-bottom: -9999px}
jsFiddle
What suited my purpose was to create a div that was always bounded within the overall browser window by a fixed amount.
What worked, at least on firefox, was this
<div style="position: absolute; top: 127px; left: 75px;right: 75px; bottom: 50px;">
Insofar as the actual window is not forced into scrolling, the div preserves its boundaries to the window edge during all re-sizing.
Hope this saves someone some time.
B2 container position relative
Top position B2 + of remaining height
Height of B2 + height B1 or remaining height
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