...

View Full Version : Problem with 100% height Divs



ImNotMe
11-04-2006, 08:12 PM
Hi all,

First post here, and hopefully it'll be my last for asking questions, and it'll be more of answering!

The problem I have is easier to explain if I show you. The page is uploaded at http://www.hamcall.co.uk/mir/website/index.html

Basically, I don't know why the left bar isn't extending down to the bottom of the page when the content in the main_content block exceeds 100% of the browsers inital viewport.

If anyone has any ideas for fixes and maybe an explanation as to where I went wrong it would be greatly appreciated.

(If you need the code you can just view source of that page, or i'll post it on here if you need it here instead)


index.html XHTML document



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!-- Div Container starts -->
<div class="container">

<!-- Main Content dividing block starts -->
<div class="main_content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur et mi. Maecenas elementum tristique felis. Morbi at massa. Donec posuere. Donec magna. Ut neque nibh, tristique nec, ultrices non, scelerisque non, sapien. Suspendisse ornare vulputate massa. Vestibulum pede lectus, facilisis ut, commodo non, vestibulum eget, dolor. Donec mollis ipsum sed magna. Nullam nonummy imperdiet urna. Morbi eget libero at dolor dapibus vestibulum. Duis tincidunt ullamcorper sem. Integer a lectus. Integer sit amet turpis.

Cras vulputate. Etiam at erat. Nam ante. Nulla sit amet tellus. Nunc tincidunt. Aenean leo sem, facilisis ut, rhoncus vel, accumsan elementum, lorem. Suspendisse vel dolor non mi euismod scelerisque. Cras vel diam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla tempus, nibh sed congue varius, nibh lacus volutpat nisl, viverra tincidunt dui orci sed lacus.

Sed nisi erat, laoreet at, sagittis ac, cursus at, nisi. Fusce nonummy consectetuer tortor. Morbi ullamcorper neque laoreet orci. Quisque euismod, magna et luctus imperdiet, lectus massa blandit pede, sit amet pellentesque libero dui ac risus. Vivamus sodales viverra sem. Vestibulum purus risus, hendrerit eu, porttitor non, bibendum at, orci. Ut convallis ipsum mollis ante. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Proin in nibh. Nunc libero.

Maecenas sagittis. Donec est. Integer vehicula eros a elit. Curabitur lobortis tincidunt tellus. Nunc scelerisque erat ac nunc. Morbi mollis lacinia purus. Nullam volutpat velit vitae metus. Donec blandit nisi id elit semper dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce felis lacus, hendrerit at, malesuada eget, tincidunt a, ipsum. Curabitur massa nunc, lacinia at, ullamcorper malesuada, ullamcorper in, mi. Ut ac mauris. Ut vulputate. Nullam suscipit libero.

Nunc dapibus massa sed arcu. Nulla consectetuer luctus diam. Donec egestas. Vivamus a mauris. Cras ut lectus ac mauris dignissim ultrices. Suspendisse potenti. Suspendisse ac arcu. Aliquam erat volutpat. Donec ornare nisi id lacus. Cras vestibulum, libero eget bibendum tristique, sem sapien iaculis diam, bibendum scelerisque felis velit ac lacus. Mauris sed arcu id neque blandit venenatis. Fusce vel libero. Duis urna mauris, consectetuer non, mollis et, eleifend sollicitudin, ligula. Nam dignissim, lacus vel venenatis viverra, tellus sem mollis ligula, in pretium nisl mi et nunc. Suspendisse odio eros, malesuada vel, mollis ac, lobortis quis, eros. Quisque mi nibh, facilisis sed, porttitor vel, rhoncus in, tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse elit enim, pulvinar et, convallis at, ultrices ac, lectus.

Nunc non lacus. Sed diam urna, ornare sit amet, suscipit in, tristique ut, enim. Maecenas vulputate justo et velit aliquam lobortis. Aliquam mauris. Nullam accumsan, purus quis scelerisque pretium, dolor eros accumsan purus, a interdum elit dui adipiscing urna. Cras est elit, feugiat vel, suscipit eu, elementum ut, tellus. Pellentesque accumsan diam eu nisl. Vivamus fringilla semper nisi. Sed eleifend elit vitae est. Aliquam rutrum lobortis ligula. Praesent non eros quis enim rhoncus elementum. Curabitur mollis est eu nisi.

Nulla rhoncus. Morbi sed lectus. Nam sem turpis, congue a, dignissim at, sollicitudin porta, justo. Curabitur blandit tincidunt leo. Nam interdum. Proin rutrum consectetuer mauris. Donec eu turpis non sapien volutpat sagittis. Morbi dignissim lorem at ligula. Ut pharetra, purus in posuere porttitor, velit lorem auctor felis, ut dapibus est velit volutpat erat. Sed semper tellus id orci. Fusce hendrerit diam sit amet mi. Nulla facilisi. Donec eleifend elementum dolor. Aliquam pede. Donec rhoncus neque sed leo. Quisque fringilla viverra ipsum. Cras sit amet orci interdum nulla egestas imperdiet. Cras sit amet pede. Aliquam erat volutpat. Nunc venenatis.

Nulla mollis, mauris a suscipit cursus, enim magna tincidunt velit, in pharetra nulla elit mollis nisl. Integer pretium. Mauris vel libero ut lacus commodo interdum. Morbi hendrerit, lectus ac varius vulputate, ante nulla pellentesque purus, at vehicula nisl libero faucibus nibh. Vestibulum sollicitudin, turpis vitae egestas auctor, neque velit egestas quam, id ullamcorper nunc massa ac est. Sed augue dolor, laoreet at, mollis nec, hendrerit accumsan, ante. Cras tellus elit, ornare nec, adipiscing dapibus, cursus ac, sapien. Fusce lorem risus, vehicula id, suscipit at, mattis vel, tortor. Donec ligula eros, ornare a, convallis nec, ornare sit amet, augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

<!-- Main Content dividing block ends -->
</div>

<div class="navbar_left_top">
</div>

<div class="navbar_top_extending">
</div>

<div class="navbar_left_extending">
</div>

<!-- Div Container ends -->
</div>

</body>
</html>





style.css CSS document



html, body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}

html>body .container {
height: auto;
}

/* Full-page container block */

div.container {
margin: 0px;
height: 100%;
min-height: 100%;
padding: 0px;
}

/* Navigation Bar Styles */

.navbar_top_extending {
background-image: url(../img/nav-top.jpg);
background-repeat: repeat-x;
left: 0px;
position: absolute;
top: 0px;
height: 142px;
right: 0px;
width: 100%;
}

.navbar_left_top {
background-image: url(../img/nav-topleft.jpg);
position: absolute;
left: 0px;
top: 0px;
height: 142px;
width: 145px;
z-index: 1;
}
.navbar_left_extending {
background-image:url(../img/nav-left.jpg);
background-repeat: repeat-y;
left: 0px;
position: absolute;
top: 0px;
width: 145px;
height: 100%;
}

.main_content {
position: absolute;
height: auto;
left: 150px;
right: 10px;
top: 147px;
}

mark87
11-04-2006, 09:11 PM
You won't be able to with all of that absolute positioning.

I would suggest you remake the page, floating elements as neccesary to achieve the desired look.

Edit: Here, something like this:


html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}

body {
background: url(http://www.hamcall.co.uk/mir/website/img/nav-left.jpg) repeat-y;
}

#container {
margin: 0;
padding: 0;
clear: both;
}

#header {
background: url(http://www.hamcall.co.uk/mir/website/img/nav-top.jpg) repeat-x;
height: 142px;
width: 100%;
}

#header #navbar_left_top {
background: url(http://www.hamcall.co.uk/mir/website/img/nav-topleft.jpg);
height: 142px;
width: 145px;
float: left;
}

#main_content {
margin-left: 150px;
}


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Untitled Document</title>

<link href="index_files/style.css" rel="stylesheet" type="text/css"></head>

<body>
<div id="header"><div id="navbar_left_top"></div></div>

<div id="container">

<div id="navbar_left_extending"></div>

<div id="main_content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur et
mi. Maecenas elementum tristique felis. Morbi at massa. Donec posuere.
Donec magna. Ut neque nibh, tristique nec, ultrices non, scelerisque
non, sapien. Suspendisse ornare vulputate massa. Vestibulum pede
lectus, facilisis ut, commodo non, vestibulum eget, dolor. Donec mollis
ipsum sed magna. Nullam nonummy imperdiet urna. Morbi eget libero at
dolor dapibus vestibulum. Duis tincidunt ullamcorper sem. Integer a
lectus. Integer sit amet turpis. Cras vulputate. Etiam at erat. Nam
ante. Nulla sit amet tellus. Nunc tincidunt. Aenean leo sem, facilisis
ut, rhoncus vel, accumsan elementum, lorem. Suspendisse vel dolor non
mi euismod scelerisque. Cras vel diam. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Nulla tempus, nibh sed congue varius,
nibh lacus volutpat nisl, viverra tincidunt dui orci sed lacus. Sed
nisi erat, laoreet at, sagittis ac, cursus at, nisi. Fusce nonummy
consectetuer tortor. Morbi ullamcorper neque laoreet orci. Quisque
euismod, magna et luctus imperdiet, lectus massa blandit pede, sit amet
pellentesque libero dui ac risus. Vivamus sodales viverra sem.
Vestibulum purus risus, hendrerit eu, porttitor non, bibendum at, orci.
Ut convallis ipsum mollis ante. In hac habitasse platea dictumst. In
hac habitasse platea dictumst. Proin in nibh. Nunc libero. Maecenas
sagittis. Donec est. Integer vehicula eros a elit. Curabitur lobortis
tincidunt tellus. Nunc scelerisque erat ac nunc. Morbi mollis lacinia
purus. Nullam volutpat velit vitae metus. Donec blandit nisi id elit
semper dictum. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Fusce felis lacus, hendrerit at,
malesuada eget, tincidunt a, ipsum. Curabitur massa nunc, lacinia at,
ullamcorper malesuada, ullamcorper in, mi. Ut ac mauris. Ut vulputate.
Nullam suscipit libero. Nunc dapibus massa sed arcu. Nulla consectetuer
luctus diam. Donec egestas. Vivamus a mauris. Cras ut lectus ac mauris
dignissim ultrices. Suspendisse potenti. Suspendisse ac arcu. Aliquam
erat volutpat. Donec ornare nisi id lacus. Cras vestibulum, libero eget
bibendum tristique, sem sapien iaculis diam, bibendum scelerisque felis
velit ac lacus. Mauris sed arcu id neque blandit venenatis. Fusce vel
libero. Duis urna mauris, consectetuer non, mollis et, eleifend
sollicitudin, ligula. Nam dignissim, lacus vel venenatis viverra,
tellus sem mollis ligula, in pretium nisl mi et nunc. Suspendisse odio
eros, malesuada vel, mollis ac, lobortis quis, eros. Quisque mi nibh,
facilisis sed, porttitor vel, rhoncus in, tortor. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Suspendisse elit enim, pulvinar et, convallis at, ultrices ac, lectus.
Nunc non lacus. Sed diam urna, ornare sit amet, suscipit in, tristique
ut, enim. Maecenas vulputate justo et velit aliquam lobortis. Aliquam
mauris. Nullam accumsan, purus quis scelerisque pretium, dolor eros
accumsan purus, a interdum elit dui adipiscing urna. Cras est elit,
feugiat vel, suscipit eu, elementum ut, tellus. Pellentesque accumsan
diam eu nisl. Vivamus fringilla semper nisi. Sed eleifend elit vitae
est. Aliquam rutrum lobortis ligula. Praesent non eros quis enim
rhoncus elementum. Curabitur mollis est eu nisi. Nulla rhoncus. Morbi
sed lectus. Nam sem turpis, congue a, dignissim at, sollicitudin porta,
justo. Curabitur blandit tincidunt leo. Nam interdum. Proin rutrum
consectetuer mauris. Donec eu turpis non sapien volutpat sagittis.
Morbi dignissim lorem at ligula. Ut pharetra, purus in posuere
porttitor, velit lorem auctor felis, ut dapibus est velit volutpat
erat. Sed semper tellus id orci. Fusce hendrerit diam sit amet mi.
Nulla facilisi. Donec eleifend elementum dolor. Aliquam pede. Donec
rhoncus neque sed leo. Quisque fringilla viverra ipsum. Cras sit amet
orci interdum nulla egestas imperdiet. Cras sit amet pede. Aliquam erat
volutpat. Nunc venenatis. Nulla mollis, mauris a suscipit cursus, enim
magna tincidunt velit, in pharetra nulla elit mollis nisl. Integer
pretium. Mauris vel libero ut lacus commodo interdum. Morbi hendrerit,
lectus ac varius vulputate, ante nulla pellentesque purus, at vehicula
nisl libero faucibus nibh. Vestibulum sollicitudin, turpis vitae
egestas auctor, neque velit egestas quam, id ullamcorper nunc massa ac
est. Sed augue dolor, laoreet at, mollis nec, hendrerit accumsan, ante.
Cras tellus elit, ornare nec, adipiscing dapibus, cursus ac, sapien.
Fusce lorem risus, vehicula id, suscipit at, mattis vel, tortor. Donec
ligula eros, ornare a, convallis nec, ornare sit amet, augue.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae
</div>
</div>

</body></html>

ImNotMe
11-05-2006, 12:42 AM
Perfect! You are a saint.

Im more used to using 100% tables and only really thought about trying div's since I saw it being used and is much, much neater and a lot more customisable.

Thanks again :)

mark87
11-05-2006, 01:08 AM
No problem. :)

Positioning isn't actually normally needed; especially absolute positioning. Alot of people when new to CSS try to use it wrongly!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum