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:

Code:

<!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...

Code:


<!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.

coothead

**Rain Lover** · 02-16-2014, 06:49 PM

Originally Posted by coothead

The "#header element" required a larger than expected height.

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

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

Originally Posted by molendijk

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>