1 reply [Last post]
hiwilson1
hiwilson1's picture
Offline
newbie
Last seen: 6 years 50 weeks ago
Timezone: GMT+1
Joined: 2013-08-20
Posts: 1
Points: 2

I want my navigation bar to run all the way down the page irrespective of content. I also now have a header bar, which fits to the side of the nav bar, is 100px in height and its width extends to the end of the page.
Now I want the content section below the header and to the right of the nav bar also to extend the full height and the full width of the page.
However because of the additional 100px of the header bar, when I set the height of the content section to 100% it's extending a further 100px below the bottom of the nav bar.

Can someone tell me how to get around this? Thanks.

<html>
 
<style>
body, html {
	margin:0;
	padding:0;
}
div#nav {
	position:absolute;
	width: 100px;
	height: 100%;
	background-color: blue;
}
div#header {
	width: 100%;
	height: 100px;
	background-color:orange;
}
div#content {
	width: 100%;
	height: auto;
	background-color: yellow;
}
</style>
<body>
	<div id="nav"></div>
	<div id="header"></div>
	<div id="content"></div>
 
 
</body>
</html>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 26 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

2 solutions

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.