Hi
I'm trying to create a div with overflow:auto and a with a defined top and bottom margin. This div box should fill the entire browser window except the defined margins(see example here:
http://www.dhtmlgoodies.com/ee/ScreenShot077.png). When content exceeds the "box", a scrollbar should appear at the right side(because of overflow:auto).
Here's a code sample:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<title>Overflow issue</title>
<style type="text/css">
html,body{
width:100%;
height:100%;
margin:0px;
padding:0px;
overflow:hidden;
}
#myContainer{
height:100%;
width:500px;
margin-left:100px;
}
.spacer{
height:200px;
background-color:#0FF;
}
.content{
overflow:auto;
background-color:#F00;
margin-top:100px;
margin-bottom:100px;
}
</style>
</HEAD>
<body>
<div id="myContainer">
<div class="content">
This box should have a bottom margin of 100 pixels and a top margin of 100 pixels. When it's not
enough space for this text, a scrollbar should appear.<br>
This is the content<br>
This is the content<br>
This is the content<br>
This is the content<br>
This is the content<br>
This is the content<br>
This is the content<br>
This is the content<br>
This is the content<br>
This is the content<br>
This is the content<br>
This is the content<br>
This is the content<br>
This is the content<br>
This is the content<br>
This is the content<br>
This is the content<br>
This is the content<br>
This is the content<br>
This is the content<br>
This is the content<br>
This is the content<br>
This is the content<br>
This is the content<br>
This is the content<br>
This is the content<br>
This is the content<br>
This is the content<br>
This is the content<br>
This is the content<br>
This is the content<br>
This is the content<br>
</div>
</div>
</body>
</HTML>
What I can't figure out is how to get the space/margins above and below the red box(100 pixels) and on the same time scrollbar at the right side of it when there's too much content.
I can't set a height for the box either since it should be dynamic, i.e. the height should change when the browser window is resized.
