> Hello,
>
> This is my first post, I hope I'll do it OK and make myself
> as clear as possible.
> I'm having quite some difficulty in managing this problem.
>
> I have this simples HTML page withs a container div, centered
> in the page through margin: auto.
> Inside it there are the other divs, one for the header, on
> for the menu, one for the content (the troublesome one) and
> one for the footer with the logos.
[snip]
> Bruno Bergher
> Designer
> www.brunobergher.com
Hi Bruno.
What you're trying to accomplish can be managed only in IE5(.5) and up. You
can do this with CSS expressions, which are technically javascript embedded
in style rules. It's true that this solution will still not work for users
with js disabled (even if they even figured out how to do that), but then
again, neither will any other solution that I know of. I tried to embed this
in your code so I could send you a proper working example, but my Spanish is
a little rusty and I was getting frustrated. ;)
Anyway, here's a small template which emulates your template. The key line
is the height setting for the content. Essentially, that rule grabs the
height of the parent contained, subtracts the header and footer and then
sets the height to the remainder.
Hope it does the trick for you. Relevant code is below.
Bill Brown
Webmaster, MacNimble.com
<!-- Code snippet begins here -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
/* <![CDATA[ */
html,body {
height: 100%;
margin:0;
overflow-y: hidden;
padding: 0;
width: 100%;
}
#siteShell {
border: 2px solid #000;
height: 96%;
margin: 1% auto;
overflow: hidden;
position: relative;
width: 750px;
}
#header {
background: #dedede;
border-bottom: 1px solid #000;
height: 200px;
text-align:center;
}
#content {
background: #fff;
height:
expression(x=(document.all.siteShell.offsetHeight-(document.all.header.offse
tHeight+document.all.footer.offsetHeight)+"px"));
overflow: auto;
}
#footer {
background: #f1f1f1;
border-top: 1px solid #000;
height: 100px;
text-align:center;
}
p {
margin: 0 0 1em 0;
}
/* ]]> */
</style>
</head>
<body>
<div id="siteShell">
<div id="header">
<h1>header</h1>
</div>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
dignissim nulla a tellus ultricies convallis. Sed malesuada tristique
orci. Integer suscipit risus eu est. Ut interdum, tellus et ornare
fermentum, enim augue lacinia enim, eget fringilla nunc nunc vitae
odio. In nonummy metus sit amet risus. In sed tortor at urna lacinia
vulputate. Etiam congue urna vel risus. Aliquam erat volutpat.
Integer fringilla rutrum arcu. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Cras a ligula nec risus tempor
hendrerit. Maecenas eu elit nec ipsum fermentum egestas. Cras in wisi
in libero feugiat bibendum. Donec ornare.
</p>
<p>
Ut ac magna. Sed et nisl vitae lectus porttitor interdum. Proin
scelerisque aliquet sem. Ut mollis sem a risus. Sed vel leo a ante
viverra scelerisque. Maecenas pharetra eleifend leo. Quisque velit.
Etiam sed ipsum non dolor consequat dignissim. Fusce dignissim.
Praesent ipsum. Cras rutrum bibendum risus. Nullam pede ligula,
vulputate nec, dictum vitae, egestas quis, dolor. Nullam eu lorem.
Pellentesque pellentesque orci vel lectus. Aenean pulvinar. Quisque
a nulla quis magna eleifend commodo. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; In sem.
</p>
<p>
Quisque turpis odio, consectetuer et, pretium eu, pulvinar non, urna.
Donec purus erat, lobortis at, faucibus et, nonummy a, mi. Duis
dapibus. Phasellus luctus, massa vitae ornare accumsan, pede tellus
molestie neque, et mattis justo arcu vel tortor. Maecenas magna quam,
condimentum vel, vehicula ut, consectetuer in, felis. Pellentesque
quis nulla non massa volutpat convallis. Sed sollicitudin lectus
vitae lacus. Vivamus mi tellus, sodales commodo, malesuada nonummy,
hendrerit lacinia, nulla. Quisque nibh odio, sagittis in, interdum
at, cursus id, dolor. Cras quam tellus, pulvinar a, dignissim ut,
fringilla ac, leo. Morbi lacinia. Cras urna lorem, rutrum id, pretium
vel, lacinia ut, ipsum. Ut est libero, tempus eget, blandit nec,
iaculis vitae, lectus. Aenean quis enim. Suspendisse lacinia eleifend
sem. Sed ac massa. Aenean ultricies sapien at orci. Proin dolor enim,
luctus in, consequat sit amet, semper at, turpis. Nam lacinia mi
vitae dolor.
</p>
<p>
Etiam consequat orci nec lacus. Duis porttitor pharetra quam.
Suspendisse ipsum. Nunc vestibulum ipsum eget diam. Donec lacinia,
risus nec fermentum volutpat, turpis sem egestas dolor, eget molestie
sapien velit ornare velit. Sed pharetra est vel nibh. Quisque nec
justo. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos hymenaeos. Phasellus feugiat dictum velit. Donec
metus velit, malesuada non, blandit elementum, accumsan ac, ante.
Pellentesque ultrices magna at diam. Vivamus laoreet dignissim pede.
Maecenas eget tortor a purus blandit elementum. Vestibulum tincidunt
quam vel risus. Nulla vel dui. Mauris pede quam, laoreet vel, dictum
eget, dignissim tincidunt, eros.
</p>
<p>
Morbi sed massa. Aenean luctus facilisis augue. Aenean odio. Morbi
lacinia tincidunt lectus. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Curabitur
nec nunc quis metus ultricies commodo. Phasellus tristique mauris ac
turpis. Quisque nisl libero, volutpat ac, scelerisque et, imperdiet
ut, risus. Curabitur augue arcu, vestibulum iaculis, rhoncus et,
adipiscing ut, magna. In orci mauris, suscipit fermentum, lacinia
quis, dictum in, turpis. Praesent convallis lacinia mi. Donec
accumsan sagittis ante. Nullam tempor imperdiet mauris. Sed tristique
nunc non pede. Nam sapien. Maecenas tellus pede, auctor convallis,
varius at, bibendum a, arcu. Sed sed felis. Aliquam erat volutpat. In
hac habitasse platea dictumst.
</p>
</div>
<div id="footer">
<p>footer</p>
</div>
</div>
</body>
</html>
___________________________________________________________
$0 Web Hosting with up to 200MB web space, 1000 MB Transfer
10 Personalized POP and Web E-mail Accounts, and much more.
Signup at www.doteasy.com
______________________________________________________________________
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/
