How to get css div to stretch to 100% of window
I'm having difficulty achieving this. I would like the div content1 and content2 to fill up the remaini开发者_Go百科ng space vertically in a window with a set minimum height.
<style type="text/css">
body,td,th {
font-family: Arial, Helvetica, sans-serif;
height:100%;
}
body {
background-color: #E1E1E1;
}
</style>
<style type="text/css">
.container {
width: 965px;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
.sidebar1 {
float: left;
width: 200px;
background: none;
padding-bottom: 10px;
} .content {
padding: 10px 0;
width: 380px;
height: 100%;
background: #fff;
float: left;
position: relative;
} .content2 {
float: left;
width: 380px;
height: 100%;
background: #fff;
padding: 10px 0;
}
-->
</style>
Here are the divs I'm trying to resize (currently empty but I would like them to fill up the window vertically):
<div class="content" style="border-left: solid 1px #CCC;"></div>
<div class="content2"><!-- end .sidebar2 --></div>
You need 100% height on the html tag as well
html { height: 100%; }
See: http://jsfiddle.net/wJ73v/
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<style>
html {height: 100%;}
body {height: 100%; margin: 0; padding: 0;}
div {border: 1px solid #000; height: 100%; float: left;}
</style>
</head>
<body>
<div id="foo">a</div>
<div id="bar">b</div>
</body>
</html>
Proper DOCTYPE is necessary, I think, since otherwise browsers go to so called quirks mode.
加载中,请稍侯......
精彩评论