Forum Moderators: not2easy
I would like to use DIVs for displaying data. My page contains of two 'parts': a top (a 'fixed' part, height:200px) and a bottom (a part where the height is variable. when not all data is displayed, a scrollbar should be come up). While I am scrolling the page, the two DIVs should be displayed on the whole page (height:100%): the top DIV should always be 'height:200px' and the bottom DIV should be automatically resized.
I tried several codes, like here below, but none of them are right.
Do anyone know how to fix this problem? I hope someone can help. Thanks!
<html>
<head>
<title></title>
<style>div {
border: 0px solid #000000;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow:hidden;
}
div#test {
height: 100%;
background-color:#ff0000;
}
div#top {
height:200px;
background-color:#00ff00;
}
div#bottom {
height: 100%;
background-color:#0000ff;
overflow : auto;
}
</style>
</head>
<body>
<div id="test">
<div id="top">
Fixed top: 200px
</div>
<div id="bottom">
Unfixed bottom: 100%<BR>
Unfixed bottom: 100%<BR>
Unfixed bottom: 100%<BR>
Unfixed bottom: 100%<BR>
Unfixed bottom: 100%<BR>
Unfixed bottom: 100%<BR>
Unfixed bottom: 100%<BR>
Unfixed bottom: 100%<BR>
Unfixed bottom: 100%<BR>
Unfixed bottom: 100%<BR>
Unfixed bottom: 100%<BR>
Unfixed bottom: 100%<BR>
Unfixed bottom: 100%<BR>
Unfixed bottom: 100%<BR>
Unfixed bottom: 100%<BR>
Unfixed bottom: 100%<BR>
Unfixed bottom: 100%<BR>
Unfixed bottom: 100%<BR>
Unfixed bottom: 100%<BR>
Unfixed bottom: 100%<BR>
Unfixed bottom: 100%<BR>
Unfixed bottom: 100%<BR>
Unfixed bottom: 100%<BR>
Unfixed bottom: 100%<BR>
Unfixed bottom: 100%<BR>
Unfixed bottom: 100%<BR>
Unfixed bottom: 100%<BR>
Unfixed bottom: 100%<BR>
Unfixed bottom: 100%<BR>
Unfixed bottom: 100%<BR>
</div>
</div>
</body>
</html>
div#test {
height: 100%;
background-color:#ff0000;
}
to
div#test {
height: auto;
background-color:#ff0000;
}
It works better now. But too bad, I cannot see the scroll bar on the div below... Maybe someone know how to fix this problem?
I really hope someone can help. Thanks!
Now, I use the code here below:
div {
border: 0px solid #000000;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow:hidden;
}div#test {
height: 100%;
background-color:#ff0000;
}
div#top {
height:200px;
background-color:#00ff00;
}
div#bottom {
height: auto;
background-color:#0000ff;
overflow: auto;
}
div#bottom {
height: 65%;
background-color:#0000ff;
overflow : scroll;
}
I hope this works.
