Hi all,
I posted a while back, about trying to get an element to be 100% height
- 50px;
Subject: "[css-d] CSS options for 100% - 50px;"
Unfortunately, although all the info was helpful, I couldn't figure out
a solution for this.
I've decided to attach a quick snippet here, to explain my situation.
What I want, is for the lower "body" section to be 100% of the browser
window height, minus the 50px at the top.
I'm not too concerned how this is accomplished, but at the moment, I
can't seem to get it to work.
Please note, what I'm after here, would be the equivalent of a frame
set, where the top frame, would be fixed at 50px high, and the body
frame, would be height="*", with scrolling.
What is important here, is that the scrollbars, that appear here in the
"body", start just below the 50px header, and end, at the bottom of the
browser window.
What I've posted, exceeds the vertical browser window, as it is 100% of
the window height, not the remaining height (100% -50px)
Any suggestions?
Cheers,
Steve
<html>
<head>
<title>Fixed Header, and Scrolling Body test</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
font-family: Verdana, Arial;
font-size: 10pt;
}
#header {
background-color: #cceeff;
height: 50px;
opacity: 0.75; /* visually see the body, if it slides under the
header */
position: absolute;
width: 100%;
z-index: 10;
}
#body {
background-color: #eeffcc;
clear: both;
height: 100%;
margin-top: 50px;
overflow: auto;
position: absolute;
top: 0px;
bottom: 400px;
width: 100%;
}
</style>
</head>
<body>
<div id="header">
<p>id="header": Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Vestibulum leo massa, interdum molestie, tincidunt vel, luctus ut,
purus. Praesent a nunc. Aenean non ante sed eros auctor vulputate. Nulla
et velit. Nullam enim. Nullam in tellus. Donec id eros. Morbi tempor.
Nulla semper volutpat nulla. Nam sem ante, aliquet eu,.</p>
</div>
<div id="body">
<p>id="body":Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vestibulum leo massa, interdum molestie, tincidunt vel, luctus ut,
purus. Praesent a nunc. Aenean non ante sed eros auctor vulputate. Nulla
et velit. Nullam enim. Nullam in tellus. Donec id eros. Morbi tempor.
Nulla semper volutpat nulla. Nam sem ante, aliquet eu, luctus vel,
tempus in, mauris. Morbi gravida. Ut felis mi, consequat quis, posuere
vel, blandit nec, mi. Phasellus arcu. In elementum, ante sollicitudin
varius congue, nisi felis rhoncus dolor, a laoreet erat mauris ac purus.
Aenean quam ligula, convallis eget, vehicula non, dignissim id, leo.</p>
<p>Sed dignissim elementum nunc. Nam accumsan nibh ut arcu. Etiam a odio
eu turpis imperdiet vehicula. Pellentesque congue pede eu nulla. Nullam
rhoncus. Nullam tortor metus, tempus ac, adipiscing eu, ullamcorper in,
risus. Praesent nec sem. Nulla nisl. Pellentesque at nulla in nisi porta
tincidunt. Fusce vulputate, nulla eu semper convallis, diam diam
vehicula tortor, vitae malesuada tortor elit et erat. Fusce orci. Cum
sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec vitae tellus in metus euismod rutrum. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus.</p>
<p>Quisque pulvinar, risus at dictum porta, nulla dolor tincidunt sem,
sit amet ornare diam ante ut ante. Sed id urna facilisis massa cursus
elementum. Morbi et diam. Donec augue diam, gravida at, euismod in,
tempus quis, quam. Nunc dignissim varius elit. Cras hendrerit tortor sit
amet leo. Etiam rutrum iaculis ipsum. Nulla facilisi. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Phasellus vel turpis vitae pede
viverra pharetra. Donec lobortis enim vitae leo. In vehicula pede eu
lacus. Etiam tempus euismod ipsum.</p>
<p>vAliquam ullamcorper consectetuer ligula. Morbi et quam. Ut eu neque
euismod turpis pellentesque ultricies. Cras id tortor. Phasellus eget
ligula. Donec orci arcu, sollicitudin a, rhoncus ut, fermentum sit amet,
nisl. In mollis. Nulla facilisi. Fusce tempor vestibulum leo. In hac
habitasse platea dictumst. Sed non mauris eget metus vestibulum
dignissim. Sed adipiscing dictum ante.</p>
<p>Cras nunc enim, consectetuer in, rutrum ac, mattis non, leo. Aenean
quis felis sed lacus commodo auctor. Maecenas ac massa. Phasellus sapien
lorem, ullamcorper vitae, placerat in, lacinia sit amet, sapien. Donec
malesuada orci sed tellus. Proin erat ipsum, euismod placerat, viverra
quis, aliquet vitae, ante. Aenean volutpat sagittis velit. Sed turpis
odio, semper at, aliquam a, lacinia non, diam. Praesent non dui. Aenean
eros nulla, aliquam fringilla, aliquet id, porta sit amet, felis. Mauris
egestas magna auctor pede. Donec ut massa.</p>
<p>Praesent posuere, nisi et placerat aliquam, ipsum arcu imperdiet sem,
rhoncus luctus dolor dui vitae est. Donec consequat, massa nec tempor
ultrices, lorem est condimentum nunc, eu tincidunt urna nunc sit amet
libero. Pellentesque luctus nisl a dui. Vestibulum ipsum est, volutpat
in, gravida eu, malesuada quis, sem. Fusce leo lorem, convallis sed,
pretium eget, faucibus a, orci. Suspendisse tempor, mi sed aliquet
imperdiet, diam velit nonummy neque, non fringilla turpis dolor eu eros.
Ut vel erat. Nunc in tellus. Suspendisse sem tortor, pharetra a,
condimentum sit amet, ultricies non, elit. Duis justo. Sed posuere.</p>
<p>Nulla facilisi. In hac habitasse platea dictumst. In ultricies luctus
leo. Nullam rutrum, nulla quis laoreet vulputate, diam nunc pulvinar
mauris, et dapibus enim lacus volutpat magna. Donec adipiscing. Praesent
et orci ut turpis gravida posuere. Maecenas erat justo, facilisis in,
porta ac, sodales ac, arcu. Sed sit amet odio vel ipsum mattis aliquet.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Nunc ut elit. Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia Curae;</p>
<p>Phasellus porttitor. Sed tempus mauris sit amet ante. Nullam
imperdiet, orci quis accumsan interdum, diam ante mollis velit, ut
facilisis mauris mauris at ante. Aliquam viverra nisl non lacus. Duis
vestibulum magna ut dolor. Cras eget risus id mi hendrerit viverra. Cum
sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Aenean malesuada, diam ut iaculis luctus, velit mi
adipiscing mauris, ut pulvinar ligula libero eu nibh. Nunc sit amet pede
at nunc dignissim ornare. Aliquam erat volutpat. Quisque hendrerit leo
sed lectus. Proin ornare. Aenean luctus. Sed sagittis porttitor est.
Curabitur a metus et nulla tristique semper. Aenean sed ipsum vel nunc
viverra mollis. Etiam faucibus lorem ut justo. Aliquam cursus consequat
ligula.</p>
<p>Quisque pulvinar, risus at dictum porta, nulla dolor tincidunt sem,
sit amet ornare diam ante ut ante. Sed id urna facilisis massa cursus
elementum. Morbi et diam. Donec augue diam, gravida at, euismod in,
tempus quis, quam. Nunc dignissim varius elit. Cras hendrerit tortor sit
amet leo. Etiam rutrum iaculis ipsum. Nulla facilisi. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Phasellus vel turpis vitae pede
viverra pharetra. Donec lobortis enim vitae leo. In vehicula pede eu
lacus. Etiam tempus euismod ipsum.</p>
<p>vAliquam ullamcorper consectetuer ligula. Morbi et quam. Ut eu neque
euismod turpis pellentesque ultricies. Cras id tortor. Phasellus eget
ligula. Donec orci arcu, sollicitudin a, rhoncus ut, fermentum sit amet,
nisl. In mollis. Nulla facilisi. Fusce tempor vestibulum leo. In hac
habitasse platea dictumst. Sed non mauris eget metus vestibulum
dignissim. Sed adipiscing dictum ante.</p>
<p>Cras nunc enim, consectetuer in, rutrum ac, mattis non, leo. Aenean
quis felis sed lacus commodo auctor. Maecenas ac massa. Phasellus sapien
lorem, ullamcorper vitae, placerat in, lacinia sit amet, sapien. Donec
malesuada orci sed tellus. Proin erat ipsum, euismod placerat, viverra
quis, aliquet vitae, ante. Aenean volutpat sagittis velit. Sed turpis
odio, semper at, aliquam a, lacinia non, diam. Praesent non dui. Aenean
eros nulla, aliquam fringilla, aliquet id, porta sit amet, felis. Mauris
egestas magna auctor pede. Donec ut massa.</p>
<p>Praesent posuere, nisi et placerat aliquam, ipsum arcu imperdiet sem,
rhoncus luctus dolor dui vitae est. Donec consequat, massa nec tempor
ultrices, lorem est condimentum nunc, eu tincidunt urna nunc sit amet
libero. Pellentesque luctus nisl a dui. Vestibulum ipsum est, volutpat
in, gravida eu, malesuada quis, sem. Fusce leo lorem, convallis sed,
pretium eget, faucibus a, orci. Suspendisse tempor, mi sed aliquet
imperdiet, diam velit nonummy neque, non fringilla turpis dolor eu eros.
Ut vel erat. Nunc in tellus. Suspendisse sem tortor, pharetra a,
condimentum sit amet, ultricies non, elit. Duis justo. Sed posuere.</p>
<p>Nulla facilisi. In hac habitasse platea dictumst. In ultricies luctus
leo. Nullam rutrum, nulla quis laoreet vulputate, diam nunc pulvinar
mauris, et dapibus enim lacus volutpat magna. Donec adipiscing. Praesent
et orci ut turpis gravida posuere. Maecenas erat justo, facilisis in,
porta ac, sodales ac, arcu. Sed sit amet odio vel ipsum mattis aliquet.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Nunc ut elit. Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia Curae;</p>
<p>Phasellus porttitor. Sed tempus mauris sit amet ante. Nullam
imperdiet, orci quis accumsan interdum, diam ante mollis velit, ut
facilisis mauris mauris at ante. Aliquam viverra nisl non lacus. Duis
vestibulum magna ut dolor. Cras eget risus id mi hendrerit viverra. Cum
sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Aenean malesuada, diam ut iaculis luctus, velit mi
adipiscing mauris, ut pulvinar ligula libero eu nibh. Nunc sit amet pede
at nunc dignissim ornare. Aliquam erat volutpat. Quisque hendrerit leo
sed lectus. Proin ornare. Aenean luctus. Sed sagittis porttitor est.
Curabitur a metus et nulla tristique semper. Aenean sed ipsum vel nunc
viverra mollis. Etiam faucibus lorem ut justo. Aliquam cursus consequat
ligula.</p>
</div>
</body>
</html>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
