Jump to content

Expanding a Div to the footer

Zilee

By Zilee
in CSS

Recommended Posts

Zilee Newbie

Zilee

Posted
Posted

Hey everyone, I have a side bar with links that's between the header and the footer. I want the background of the side-bar to stretch all the way to the footer rather than to the list inside it.Here's a picture for better visualization:example.png

<div class="wrapper">			<header><span id='blueFont'>SEA</span>MS</header>  	   		<div class='sideBar'>				<ul>					<li>GENERAL CONFIGURATION</li>					<li>CATEGORIES</li>					<li>POST RANKS</li>					<li>THEMES</li>					<li>USERS</li>				</ul>			</div>		</div>						<footer>COPYRIGHT <span id='blueFont'>PATRICK ZIELINSKI</span> 2010 ALL RIGHTS RESERVED.</footer>

And the CSS:

BODY{	background-color: #161616;	font-family: "Lucida Console", Monaco, monospace;	color: #FFFFFF;	font-size: 12px;	height: 100%;}HEADER{	height: 30px;	/*[disabled]width:100%;*/	background-image: url(images/topBG.png);	line-height: 29px;	padding-left: 9px;	margin: 0;}.sideBar{	width: 196px;	background-color: #4E4E4E;	height: 100%;}.sideBar UL{	list-style-type: none;	padding-left: 9px;	padding-top: 9px;}.sideBar LI{	height: 35px;}.sideBar LI:hover{	color: #33FCFC;}.wrapper{	min-height: 100%;	height: auto !important;	height: 100%;	margin: 0 auto -22px;}FOOTER{	background-image: url(images/footerBG.png);	line-height: 22px;	padding-left: 9px;}

Setting the height to 100% inside the sideBar class simply stops at the end of the last element in the list of links.

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

If you set the height of the <html> and <body> elements to 100% and also all the ancestor elements of the menu, the height: 100% will work properly. However, you won't be able to apply padding or margins because it will exceed the window height.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...