1 reply [Last post]
CarbineMonoxide
Offline
Regular
Last seen: 13 years 44 weeks ago
Joined: 2006-04-13
Posts: 15
Points: 0

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>

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 19 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

100% height of document and not browser window?

You'll need to research Faux Columns.

Verschwindende wrote:
  • CSS doesn't make pies