I have a div positioned at the top of the body and another div positioned at the bottom of the body
Now I want to place a div between those two divs and have its height take the max space available between those two divs.
The vertical space between those two divs is not fixed, meaning that when the user decreases/increases the height of the window, I want the middle div to readjust its height accordingly.
More specifically :
<body>
<div style="position: fixed; top: 0px; left: 0px; width: 200px; height: 100%;">
<div style="float: left; height: 50px, width: 200px; background-color: green;"/>
<div style="float: left; height: ???? ; width: 200px; background-color: red;"/>
<div style="float: left; height: 50px, width: 200px; background-color: blue;" />
</div>
</body>
So basically imagine a green rectangular fixed at the top left of the page, a blue one fixed at the bottom left of the page and a red column between them readjusting its height according to the height of the window.
How can I achieve this?
Setting its height at 100% simply makes the middle div expand its height to the bottom of the window which is not what I want. I need it to stop where the blue div starts. Also, making its height e.g. 73% doesn't make it auto-adjust itself correctly when the window height is changed either.
I have a div positioned at the top of the body and another div positioned at the bottom of the body
Now I want to place a div between those two divs and have its height take the max space available between those two divs.
The vertical space between those two divs is not fixed, meaning that when the user decreases/increases the height of the window, I want the middle div to readjust its height accordingly.
More specifically :
<body>
<div style="position: fixed; top: 0px; left: 0px; width: 200px; height: 100%;">
<div style="float: left; height: 50px, width: 200px; background-color: green;"/>
<div style="float: left; height: ???? ; width: 200px; background-color: red;"/>
<div style="float: left; height: 50px, width: 200px; background-color: blue;" />
</div>
</body>
So basically imagine a green rectangular fixed at the top left of the page, a blue one fixed at the bottom left of the page and a red column between them readjusting its height according to the height of the window.
How can I achieve this?
Setting its height at 100% simply makes the middle div expand its height to the bottom of the window which is not what I want. I need it to stop where the blue div starts. Also, making its height e.g. 73% doesn't make it auto-adjust itself correctly when the window height is changed either.
Share Improve this question asked Jul 15, 2013 at 23:14 The Random GuyThe Random Guy 3412 gold badges4 silver badges10 bronze badges 1- you can not self close a <div>. – Mark Commented Jul 15, 2013 at 23:31
4 Answers
Reset to default 2Assuming you are doing this because you want a footer that is flushed to the bottom of the page, then this will achieve a similar effect: http://matthewjamestaylor./blog/keeping-footers-at-the-bottom-of-the-page
However solution does not resize the middle div but merely positions the footer over it and then use padding to prevent the contents of the middle div from going onto the footer.
If you want to actually change the size of the middle div, here's the JavaScript for it using jQuery: http://jsfiddle/BnJxE/
JavaScript
var minHeight = 30; // Define a minimum height for the middle div
var resizeMiddle = function() {
var h = $('body').height() - $('#header').height() - $('#footer').height();
h = h > minHeight ? h : minHeight;
$('#body').height(h);
}
$(document).ready(resizeMiddle);
$(window).resize(resizeMiddle);
HTML
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
CSS
html,
body {
margin:0;
padding:0;
height: 100%;
}
#header {
background:#ff0;
height: 100px;
}
#body {
background: #aaa;
}
#footer {
height: 60px;
background:#6cf;
}
The correct way of ending <div> tag is by using </div>.
Try this code-
<body>
<div style="position: fixed; top: 0px; left: 0px; width: 200px; height: 100%;">
<div style="float: left; height: 50px; width: 200px; background-color: green; position: fixed;"></div>
<div style="float: left; height: 100%; width: 200px; background-color: red;"></div>
<div style="float: left; bottom: 0px; left:0px; position: fixed; height: 50px; width: 200px; background-color: blue;"></div>
</div>
</body>
HTML:
<body>
<div id="wrapper">
<div id="div1">...</div>
<div id="div2">...</div>
<div id="div3">
content<br/>
content<br/>
</div>
</div>
</body>
CSS:
html, body {
height:100%;
}
#wrapper {
position:relative;
height:100%;
}
#div3 {
background:pink;
bottom:0;
position:absolute;
width:100%;
}
jsfiddle: http://jsfiddle/BnJxE/
You can use paddings the same height of your top and bottom elements and set box-sizing to border-box. By setting the height to 100% it will cover the entire height minus the paddings.
JSFiddle with scrollable content
#container {
position: fixed;
top: 0px;
left: 0px;
width: 200px;
height: 100%;
}
#top {
float: left;
height: 50px;
width: 200px;
background-color: green;
position: fixed;
top: 0;
}
#middle {
float: left;
height: 100%;
width: 200px;
background-color: red;
box-sizing: border-box;
padding-bottom: 50px;
padding-top: 50px;
}
#bottom {
float: left;
height: 50px;
width: 200px;
background-color: blue;
position: fixed;
bottom: 0;
}<body>
<div id="container">
<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>
</div>
</body>