Menu
I can get a 100% height div, like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>T5</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css">
</link>
<style type="text/css">
* { padding: 0; margin: 0; }
html, body { height: 100%; }
body {
font-family: "lucida sans", verdana, arial, helvetica, sans-serif;
font-size: 75%;
}
h1 { font-weight: bold; font-size: 1.4em; padding: 10px 10px 0;}
p { padding: 0 10px 1em; }
#container {
min-height: 100%;
background-color: #DDD;
border-left: 2px solid #666;
border-right: 2px solid #666;
width: 280px;
margin: 0 auto;
}
* html #container { height: 100%; }
</style>
</head>
<body>
<div id="container">
<h1>100% Height Div</h1>
<p>Lorem ipsum ...</p>
</div>
</body>
</html>
It looks like this:
When I say "100% height" - I mean it stays full height regardless of how much content is in the div, and regardless of how the window gets resized.
But is it possible to get a div with a height of "almost 100%" height? If I want margins at the top and bottom, can I do that?
I want it to look like this:
I can do this with Javascript+CSS. Can I do it with just CSS?
Answer:
Yes, it's possible with absolute positioning.
#container {
width: 380px;
background-color: #DDD;
border: 2px solid #666;
position: absolute;
top: 20px; /* margin from top */
bottom: 20px; /* margin from bottom */
left: 50%; /* start left side in middle of window */
margin-left: -190px; /* then, reverse indent */
overflow: auto; /* scrollbar as necessary */
}
Result:
Thanks to keithjgrant for the answer. See all the code at http://jsbin.com/otobi .
944
It seems like this should be one of the easiest things to understand in CSS. If you want a block-level element to fill any remaining space inside of its parent, then it's simple — just add width: 100% in your CSS declaration for that element, and your problem is solved.
Syntax: To set a div element height to 100% of the browser window, it can simply use the following property of CSS: height:100vh; Example: HTML.
Another way of making a <div> fill the remaining space is to use the CSS position property. Just set the position to “absolute” to stretch the <div>.
Use flexbox layout! On container, set display: flex and align-items: flex-end , then set your CSS on the inner div as you normally would. The flex-end value makes it stick to the bottom of its container.
Try absolute positioning:
#container {
position: absolute;
top: 20px;
bottom: 20px;
}
It can be quirky in IE6 (what isn't?), but there are a lot of tricks to try if you google around. Some include adding a clear: both rule or wrapping your absolute-positioned div inside another div.
An overflow: auto should make the scrollbar behave as you have it pictured.
edit: Alternately, you could add 20px padding to a wrapper div, then set your container to height: 100% with no margin, and it should fill up to the padding of its wrapper.
156
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
