- This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
Viewing 7 posts - 1 through 7 (of 7 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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?
I used the viewport height unit.
It doesn’t work well. Giving 10% to the header
DIV doesn’t always look good. Just change the screen resolution and see what happens.
You would need javascript to determine the height of the content wrapper.
I probably would, but a CSS approach is preferable.
Here you go…
Why 22px
? It’s about 70px
in IE11.
I probably would, but a CSS approach is preferable.
That’s my point…I don’t think there is one.