Forum Moderators: open
I am a novice to CSS, so pardon my ignorance! Also, my apologies if this question has already been answered. I have searched for a day now and have not been able to come up with a solution.
My situation is as follows. I have a left sidebar on my webpage with height set to 100%. Thus, it extends to the bottom of the viewport. I have a bunch of divs nested in this sidebar.
I want to make it so that the last div nested has auto scrolling and its height does not go past the sidebar (it's parent) height. I do not want to use any fixed positioning, since the divs above it have dynamic content.
Can this be done without JavaScript? I just need it to work on the latest versions of IE, Netscape, and Mozilla/Firefox.
Thanks in advance!
Actually, here is some more info if it helps any. This is what I have (x represents the sidebar which has height: 100%, * represents the nested div):
xx¦yyyyyy
xx¦yyyyyy
xx¦yyyyyy
xx¦yyyyyy
xx¦yyyyyy
**¦yyyyyy
**¦yyyyyy
I want the nested div shown above (*) to be auto scrolling, and its height should not extend beyond the sidebar's height (100%).
sorry for delay in answering.. I haven't looked properly yet but lets see if we can get some discussion going..
1st Question: do you know the explicit heights of the other divs or are their heights dictated by their content?
[added] ignore the above question! I see you have already stated it's dynamic content.. ooops[/added]
I'll have to go do some tests..
Suzy
<div id="sidebar">
content content content (represented by the x's)... may even be divs and other elements...
<div id="nested"></div>
</div>
<html>
<head>
<title>Dynamic height</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#sidebar {
background: yellow;
height: 100%;
width: 200px;
}
#scroller {
background: green;
overflow: auto;
}
</style>
</head>
<body>
<div id="sidebar">
lots of content here...
<div id="scroller">
<script type="text/javascript">
//check window height
bodyheight = document.body.scrollHeight?document.body.scrollHeight:document.body.offsetHeight;
//check how much content there is in the parent container, and the height of it
wrapperheight = document.getElementById('sidebar').scrollHeight?document.getElementById('sidebar').scrollHeight:document.getElementById('sidebar').offsetHeight;
//now subtract sidebar height from window height
document.getElementById('scroller').style.height = (bodyheight - wrapperheight) + "px";
</script>
Some other content here...
</div>
</div>
</body>
</html>
Thanks again!
Once again thanks for the script!
One problem however, the script does not seem to be working in Netscape 7. I think its with this line:
document.getElementById('sidebar').scrollHeight
EDIT: Actually, I think its because the sidebar's height is 100%. In IE, scrollHeight gives the correct value based on the amount of content. However, in Netscape 7 it simply gives the full height (ie the height of the viewport).
Any ideas on how to get the correct height in Netscape 7?
Thanks!
