How to keep DIV stretched to the bottom of the webpage with height 100% and overflow:auto using CSS only?
Question
Salam all,
I have an HTML page with two sections, header and content, the header height is known and fixed, and the content height should fullfill the rest area of the webpage. While the content section fills the rest area of the webpage it should show a scrollbar if the contents are greater than the height of the webpage ( I don't want to see a webpage scrollbar, only content DIV scrollbar).
I have done this already (I've got the results that I want) using Javascript,
My question is : can I make the same behaviour using CSS?
Here is the code:
CSS file (site.css):
html, body
{
height:100%;
width:100%;
padding:0;
margin:0;
}
#header
{
height:85px;
width:100%;
background-color : yellow;
}
#container
{
height: 100%;
width:auto;
background-color : green;
padding:2px;
margin: 0 auto;
}
#maindiv
{
height:100%;
width:100%;
overflow:auto;
}
Html file:
<!DOCTYPE html>
<html>
<head>
<link href="Site.css")" rel="stylesheet" type="text/css"/>
</head>
<body onresize="onheightchanged()" onload="onheightchanged()">
<table id="header">
<tr>
<td>
some headers <br />
some headers <br />
some headers <br />
some headers <br />
</td>
</tr>
</table>
<div id="container">
<div id="maindiv">
contents <br />contents <br />contents <br />contents <br />contents <br />contents <br />
contents <br />contents <br />contents <br />contents <br />contents <br />contents <br />
contents <br />contents <br />contents <br />contents <br />contents <br />contents <br />
contents <br />contents <br />contents <br />contents <br />contents <br />contents <br />
contents <br />contents <br />contents <br />contents <br />contents <br />contents <br />
contents <br />contents <br />contents <br />contents <br />contents <br />contents <br />
</div>
</div>
<script type="text/javascript">
function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight));
}
function onheightchanged() {
var container = document.getElementById("container");
var newheight = getDocHeight() - 90; // 90 = header height (85) + padding/margin (5)
container.style.height = newheight + "px";
}
</script>
</body>
</html>
3 answers
solution1
4 ACCPTED 2011-09-13 08:26:01
You probably need to set the container div absolute like this:
#container {
position: absolute;
top: 85px;
bottom: 0px;
left: 0px;
right: 0px;
overflow: auto;
background-color : green;
}
You can also try to use position: fixed .
Edit : Added my version of the example:
<!DOCTYPE html>
<html>
<head>
<style>
html, body
{
height:100%;
width:100%;
padding:0;
margin:0;
}
#header
{
height:85px;
width:100%;
background-color : yellow;
}
#container {
position: absolute;
top: 85px;
bottom: 50px;
left: 200px;
right: 30px;
overflow: auto;
background-color : green;
}
#maindiv
{
height:100%;
width:100%;
overflow:auto;
}
</style>
</head>
<body>
<table id="header">
<tr>
<td>
some headers <br />
some headers <br />
some headers <br />
some headers <br />
</td>
</tr>
</table>
<div id="container">
<div id="maindiv">
contents <br />contents <br />contents <br />contents <br />contents <br />contents <br />
contents <br />contents <br />contents <br />contents <br />contents <br />contents <br />
contents <br />contents <br />contents <br />contents <br />contents <br />contents <br />
contents <br />contents <br />contents <br />contents <br />contents <br />contents <br />
contents <br />contents <br />contents <br />contents <br />contents <br />contents <br />
contents <br />contents <br />contents <br />contents <br />contents <br />contents <br />
</div>
</div>
</body>
</html>
solution2
1 2011-09-13 08:12:46
Use overflow-y:hidden; in which produce scroll in that css.
solution3
0 2011-09-13 08:13:48
overflow:auto doesn't work with percentage based height. What you can do is also set the height of #maindiv in the onHeightChanged() function after which overflow:auto should work.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.