Log in

View Full Version : Flexible DIV to cover the rest of the page and divide the height in half for children


Rain Lover
02-16-2014, 05:40 AM
Here's a sample layout:


<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Dynamic DIV</title>
<style>
#header {
background: green;
}
#header * {
vertical-align: middle;
}
button {
float: right;
}
#top {
background: yellow;
}
#bottom {
background: aqua;
}
</style>
</head>

<body>
<div id="header">
<label for="checker">Check</label>
<input type="checkbox" id="checker">
<label for="slider">Slider</label>
<input type="range" id="slider"><span>Some text</span>
<button type="button">Bar</button>
<button type="button">Foo</button>
</div>
<div id="content">
<div id="top">Top content</div>
<div id="bottom">Bottom content</div>
</div>
</body>

</html>


Demo: http://jsfiddle.net/CZt36/1/

How can I extend the content DIV to he rest of the page so that the top and bottom DIVs get 50% of the content DIV height?
coothead
02-16-2014, 04:19 PM
Hi there Rain Lover,


try it like this...


<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">

<title>Dynamic DIV</title>

<style>
html {
margin:0;
height:100%;
}
body {
min-width:624px;
height:calc(100% - 20px);
min-height:122px;
margin:10px;
}
#header {
line-height:76px;
padding:1px 5px;
background:green;
}
span{
margin:0 10px;
}
input[type=button] {
float:right;
height:22px;
margin:26px 0 18px 5px;
}
#content {
height:calc(100% - 78px);
}
#top {
height:50%;
background:yellow;
}
#bottom {
height:50%;
background:aqua;
}
</style>

</head>
<body>

<div id="header">
<label for="checker">Check</label>
<input type="checkbox" id="checker">
<label for="slider">Slider</label>
<input type="range" id="slider"><span>Some text</span>
<input type="button" value="Bar">
<input type="button" value="Foo">
</div>

<div id="content">
<div id="top">Top content</div>
<div id="bottom">Bottom content</div>
</div>

</body>
</html>
The "#header element" required a larger than expected height. :)

This was due to IE11's 'input type="range"' height of 74px. :eek:


coothead
Rain Lover
02-16-2014, 06:49 PM
The "#header element" required a larger than expected height. :)
This was due to IE11's 'input type="range"' height of 74px. :eek:


Many thanks for the code, but I'd prefer not to give a fixed height, especially such a big height size, to the header DIV.
coothead
02-16-2014, 07:01 PM
Go with Paul O'brian's flexible box method then. ;)


coothead
molendijk
02-16-2014, 08:56 PM
You may want to test this:


<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">

<title>Dynamic DIV</title>

<style>
#header {position: absolute; left: 0px; top: 0px; right: 0px; background: green}
input[type=button] {float:right;}
#top {position: absolute; left: 0px; top: 27px; right: 0px; height: 50%; background: yellow}
#bottom {position: absolute; left: 0px; top: 50%; right: 0px; bottom: 0px;background:aqua; }
</style>

</head>

<body>

<div id="header">
<label for="checker" style="position: relative; top: -4px">Check</label>
<input type="checkbox" id="checker" style="position: relative; top: -3px">
<label for="slider" style="position: relative; top: -4px">Slider</label>
<input type="range" id="slider" ><span style="position: relative; top: -4px">Some text</span>
<input type="button" value="Bar" >
<input type="button" value="Foo">
</div>

<div id="top" >Top content</div>
<div id="bottom" >Bottom content</div>

</body>
</html>
Rain Lover
02-17-2014, 03:21 AM
You may want to test this

Why top:27px? As coothead said and I tested, the header DIV height is about 70px in IE11.
molendijk
02-17-2014, 05:00 PM
Sorry, I forgot about the IE11-issue. If you want the header to have a small height in both IE and non-IE, you could try this:


<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">

<title>Dynamic DIV</title>

<style>
#header {position: absolute; left: 0px; top: 0px; right: 0px; background: green}
input[type=button] {float:right;}
#top {position: absolute; left: 0px; top: 25px; right: 0px; height: 50%; background: yellow}
#bottom {position: absolute; left: 0px; top: 50%; right: 0px; bottom: 0px;background:aqua; }
</style>

</head>

<body>

<div id="header" >
<label for="checker" >Check</label>
<input type="checkbox" id="checker" >
<label for="slider" >Slider</label>
<input type="range" id="slider" ><span >Some text</span>
<input id="bar" type="button" value="Bar" >
<input id="foo" type="button" value="Foo">
</div>

<div id="top" >Top content</div>
<div id="bottom" >Bottom content</div>

<script>
//see http://www.pinlady.net/PluginDetect/IE/
var tmp = document.documentMode, e, isIE;
try{document.documentMode = "";}
catch(e){ };
isIE = typeof document.documentMode == "number" ? !0 : eval("/*@cc_on!@*/!1");
try{document.documentMode = tmp;}
catch(e){ };

if (isIE)
{
document.getElementById('header').style.marginTop='-10px';
document.getElementById('header').style.height='40px';
document.getElementById('bar').style.marginTop='11px';
document.getElementById('foo').style.marginTop='11px';
}
</script>

</body>
</html>
Rain Lover
02-18-2014, 04:38 AM
Sorry, I forgot about the IE11-issue. If you want the header to have a small height in both IE and non-IE, you could try this:

Thank you, but I prefer a simple CSS solution.