Flexible DIV to cover the rest of the page and divide the height in half for children

Hi,

Zoom doesn’t effect chrome on your demo unless you have content that is suddenly stretched below the fold and then that content is no longer in the viewport and therefore should not have a background-colour. The vh unit means viewport height and not content height.

There is a bug in chrome however if you grab the bottom of the window and drag it downwards then the background stays put and doesn’t follow the viewport. However if you resize from the corner of the browser then the background does keep up with the viewport.

Looks like Chrome still needs the old fashioned helper to make this work:


html{height:100%}

Don’t confuse the ‘vh’ unit with min-height:100% :slight_smile:

Thanks for the clarification! :slight_smile:
Instead of

html, body {margin:0; padding:0;}
body {height:100vh;}

can I use

html, body {margin:0; padding:0; height:100%;}

It seems to resolve the Chrome zoom issue and works in different screen resolutions.

Yes it will do the same job as the code I gave you. You are basically saying the same thing.:slight_smile:

Flexbox is great! You opened up a new horizon with lots of possibilities to me. Thank you! :slight_smile:
I wonder how I can put main and footer in your demo side by side while keeping the header at the top.

Something like this I guess.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
html, body {
	margin:0;
	padding:0
}
html { height:100% }
body {
	display: flex;
	height: 100vh;
	flex-direction:column;
}
.content {
	flex: 1 1;
	justify-content: center;
}
header {
	background:orange;
	flex:none
}
main.content { background:blue; }
footer {
	background:red;
	flex:1
}
.wrap {
	display: flex;
	flex-direction: row;
	flex: 1 0px;
}
</style>
</head>

<body>
<header>
		<button type="button">Bar</button>
		<button type="button">Foo</button>
		<label for="checker">Check</label>
		<input type="checkbox" id="checker">
		<label for="slider">Slider</label>
		<input type="range" id="slider">
		<span>Some text</span> </header>
<div class="wrap">
		<main class="content">test</main>
		<footer  class="content">test</footer>
</div>
</body>
</html>

I’m still trying to get my head around it also :slight_smile:

Perfect! Thanks a million! :slight_smile: