Mon, 2006-05-15 19:34
Well, I've gotten my navigation bar to show up as 100% height of the browser window, but if I scroll down, the div cuts off..
I was wondering if there was a way to get my nav bar to be 100% of the document..?
html, body
{
margin: 0px;
padding: 0px;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
#logo {
position: absolute;
top: 0px;
left: 0px;
background-image: url(images/image_01.gif);
background-repeat: no-repeat;
width: 750px;
height: 151px;
}
#container {
width: 100%;
height: 100%;
background-image: url(images/bg.gif);
background-repeat: repeat-x;
}
#content {
width: 85%;
float: right;
}
#navigation {
width: 15%;
background-color: #3d69b8;
float: left;
height: 100%;
}
* html #navigation {
width: 15%;
background-color: #3d69b8;
float: left;
height: 100%;
}
#navigation-text {
padding: 150px 7px 7px 0px;
}
#container-text {
padding: 150px 7px 7px 0px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Title Here</title>
<link rel='stylesheet' href='style.css' type='text/css' />
</head>
<body>
<div id='container'>
<div id='content'>
<div id='container-text'>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam feugiat, velit a lobortis vestibulum, ligula lacus accumsan diam, in varius lacus nibh eu tellus. Maecenas commodo, lorem vel tincidunt convallis, enim orci molestie diam, sit amet placerat quam dui tristique velit. Vestibulum tortor odio, facilisis vitae, faucibus id, placerat vel, dolor. Aliquam sagittis dolor non sapien. Cras mi ante, convallis ut, tristique quis, eleifend eu, erat. Donec diam ligula, rhoncus vitae, iaculis eget, vulputate sed, neque. Phasellus condimentum nisl non eros. Sed consequat leo sit amet eros. Donec eleifend nisl vehicula ligula. Morbi consequat mauris eget libero adipiscing ornare. Maecenas condimentum viverra urna. Ut eu lacus. Aenean nunc. Quisque fermentum ultrices quam. Vivamus iaculis, leo sit amet lacinia aliquet, odio metus eleifend felis, sit amet faucibus ligula ligula sit amet sem. Vivamus pellentesque dolor. Fusce sed eros. Curabitur suscipit. Nam in nunc. </p>
<p>Nullam purus. Aenean tempor eleifend neque. Nam lacinia mollis felis. Nam tristique massa et ipsum. Etiam iaculis ornare mi. Mauris odio risus, tristique a, porttitor in, accumsan sit amet, eros. Curabitur sit amet velit. In elementum leo a ligula dictum eleifend. Proin urna nisl, interdum ac, volutpat et, porta id, ipsum. Maecenas ligula metus, convallis id, consequat id, dapibus ac, mi. Vivamus tincidunt, diam pulvinar mollis consequat, tellus diam consectetuer lacus, ac ullamcorper erat turpis et orci. </p>
<p>Aliquam auctor massa commodo turpis. Aliquam odio. Mauris tortor. Donec consectetuer imperdiet ipsum. Mauris justo neque, tristique sed, ullamcorper quis, ullamcorper quis, velit. Duis lacinia tincidunt nunc. Sed dignissim turpis ut nibh. Morbi diam. Sed sed dolor. Nam turpis arcu, auctor vel, tempus sit amet, placerat a, risus. Nulla id eros. Proin convallis. Donec consectetuer felis quis nulla. </p>
<p>Integer cursus dictum quam. Etiam fermentum facilisis augue. Curabitur consectetuer. Aliquam laoreet lacinia sapien. Morbi quis lacus ut dui pulvinar aliquam. Morbi nec magna. Nunc lacus risus, iaculis aliquet, tristique eget, fermentum ut, magna. Aliquam erat volutpat. Nunc sodales condimentum lacus. Fusce dui. Nulla lobortis interdum leo. Suspendisse potenti. Phasellus vitae velit at nibh venenatis laoreet. Etiam rhoncus nunc eu massa. Mauris in urna. Donec nunc diam, blandit a, tempus nec, semper ac, nulla. Aliquam rhoncus. In eu felis fermentum eros elementum tincidunt. Donec non turpis sed mi tincidunt dictum. Aliquam sit amet ipsum. </p>
<p>Donec placerat tincidunt sapien. Proin ultricies, eros at ultricies faucibus, mauris ipsum venenatis felis, vitae congue erat lorem nonummy orci. Sed et risus. Mauris non libero dapibus orci euismod blandit. Praesent cursus elit id orci. Vestibulum libero est, rhoncus accumsan, consequat id, ultricies at, nulla. Aliquam erat volutpat. Ut purus. Praesent fermentum nibh vitae ligula. Vivamus magna. Maecenas pharetra ullamcorper nibh. Aliquam sapien turpis, consectetuer sit amet, tempor eu, suscipit vitae, odio. Fusce vitae leo. Vestibulum nec dui. Vestibulum nec neque. Curabitur augue. Duis erat. </p>
</div>
</div>
<div id='navigation'>
<div id='navigation-text'>
Navigation Here
</div>
</div>
</div>
<div id='logo'></div>
</body>
</html>
Mon, 2006-05-15 19:42
#1
100% height of document and not browser window?
You'll need to research Faux Columns.