Hi all

Usual CSS thing (God, I miss tables sometimes!). Can't get my content div to expand to 100% height of viewport. Footer sticks correctly, no errant scrollbars where they needn't be. Had to 'position: absolute' the left navigation div (#left-sidebar) to get it to work properly but that's fine.

The usual CSS sticky footer trick doesn't help because the content still doesn't scale 100%. Played around with the faux column technique too but, again, doesn't work in this instance.

The page is at www.scaldbeckhouse.com/index.php

CSS code
Code:
/* STYLESHEET FOR STANDARD SITE */

@charset "utf-8";


html, body {
	margin: 0px;
	padding: 0px;
	background: url('i/layout/bg.gif') fixed;
	min-height: 100%;
	height: 100% !important;
}

p {
	margin-top: 0px;
}

#headercontainer {
	width: 100%;
	height: 92px;
	background: url('i/layout/hdr_bg.gif');
}

#header {
	margin: 0px auto 0px auto;
	width: 915px;
	height: 92px;
	text-align: right;
	color: #FFF;
	font-family: "Times New Roman", Times, serif;
	font-size: 20px;
	position: relative;
}

#contact {
	position: absolute;
	top: 25%;
	right: 0px;
}

#contentwrapper {
	width: 915px;
	margin: 0px auto 0px auto;
	height: 100%;
	min-height: 100%;
	overflow: auto;
    padding-bottom: 80px;
	overflow: hidden;
    height: 100%;
	clear: both;
	background:url(i/layout/fauxcolumn.gif)
}

#footer {
	width: 885px;
	margin: 0px auto 0px auto;
	background-color: #333;
	height: 50px;
	margin-top: -80px;
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding: 15px;
	color: #FFF;
	clear: both;
}

#wrapper {
	height: 100%;
    height: auto !important;
    min-height: 100%;
	padding: 0px;
	clear: both;
	position: relative;
}

#left-sidebar {
    width: 140px;
    float: left;
    padding: 0px;
	background-color: rgba(112,112,112,0.7);
	text-align: center;
	color: #FFF;
	font-family: "Times New Roman", Times, serif;
	padding: 20px 0px 20px 0px;
	line-height: 24px;
	bottom: 0px;
	top: 92px;
	position: absolute;
}

#right-content {
    width: 735px;
    float: right;
    padding: 20px;
	bottom: 80px;
	height: 100%;
	height: auto !important;
	min-height: 100%;
}

#right-tile {
	width: 775px;
	float: right;
	padding: 0px;
}

HTML code
Code:
<body>
<div id="wrapper">

<!-- HEADER -->
<div id="headercontainer">
  <div id="header">
    <a href="index.php"><img src="i/layout/logo.png" style="float: left; border: none;" /></a>
  <div id="contact">(01263) 123 456<br /> <script language="JavaScript" type="text/javascript">
	<!--
	// TO AVOID SPAM MAIL, HIDE EMAIL FROM BOTS
	var a = "info"
	var b = "scaldbeckhouse"
		document.write(a + "@" + b + ".com");
	-->
</script></div>
</div></div>
<!------------>

<!-- CONTENT -->
<div id="contentwrapper">
<div id="left-sidebar">
  <p>Home</p>
  <p>The House</p>
  <p>Luxury Breaks</p>
  <p>Facilities</p>
  <p>Availability</p>
  <p>About Morston</p>
  <p>Contact Us</p>
</div>
<div id="right-content">
This is 'right-content' div
</div>
</div>
<!------------->

<!-- FOOTER -->
</div>
<div id="footer">
<div style="float:right;">Web Design by &nbsp;<img src="i/layout/ftr_appazza.png" width="70" height="13" alt="Web Design by Ben Weston at Appazza" align="texttop" /></div>
<p>Copyright &copy; Hoe Hall, 2012. All Rights Reserved</p>
<p>ACCESSIBILITY &nbsp;&nbsp;| &nbsp;&nbsp;SITE MAP &nbsp;&nbsp;| &nbsp;&nbsp;CONTACT</p>
</div>
<!------------>


</body>