Hi,

 

I'm in the middle of developing a test HTML/CSS control panel using percentage widths and heights. When there isn't much content the 100% height function works on the CSS sidebar etc but once there is a lot of content and I have to scroll down on the page, the sidebar no longer goes to the very bottom.

 

Any divs I put in the 'main-container' have no height set on the CSS divs.

 

 

Does anyone have any idea how to fix it?

 

HTML

<div id="wrapper">

<header>
</header>
	
<section id="sidebar">
</section>
    
<section id="main-container">
</section>

</div>

 

CSS

 

html, body { width:100%;height:100%; overflow:auto;}

body{
	margin:0;
	min-height:100%; 
	height:100%; 
	width:100%;
	padding:0;
	font-family: 'Open Sans', sans-serif;
	color:#484848;
	overflow-y:scroll;
}

#wrapper{
	width:100%;
	height:100%;
	min-height:100%;
	position:relative;
	margin:0;
}

header{
	width:100%;
	height:10%;
	min-height:80px;
	position:relative;
}

#sidebar{
	display: inline-block;
	width:20%;
	min-width:170px;
	height:90%;
	min-height:90%;
	position:relative;
}

#main-container{
	display: inline-block;
	margin-left:1px;
	width:78%;
	height:90%;
	margin-right:0.5%;
	vertical-align:top;
	position:relative;
}

 

Remove min-height.. add these values in #sidebar.

 

#sidebar{overflow: hidden; height: 100%; padding: 0; position: absolute; left: 0; top: 0;}

 

Let me know, your issue resolved? If not, It would be better to share live URL of your page so can help you easily..

 

Thanks

Below is a link to the online test CP.

 

http://www.markclaxton.co.uk/test/

 

As you can see the content goes further down the page but the sidebar doesn't.

I can't see Properly.looking spam

Do you still need help with this? I looked at the link you posted and the sidebar now reaches the bottom if the viewport, so I assume you got it sorted?

It would be easier if you posted a link to your site. Sometimes it's easier to find a problem if you can see the design in action. Do you still need help with this anyway though?

Apologies for the delay. Yeah its sorted now thanks.