I have been told to use JS to resolve my issue:
My issue is that I have 2 divs content and sidebar with the height set to 100%, I have a footer located underneath.
My issue is that on my laptop I would like the page to show without a scroll and on a full page3, if there is more data the page will then require a scroll.
How could I set the div height determined to my screen resolution?
You can do this in pure HTML/CSS - no JavaScript required.
What you're after is a cross-browser sticky footer.
The following is derived from http://www.cssstickyfooter.com/:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
padding: 0;
}
#wrap {
min-height: 100%;
}
#main {
overflow:auto;
padding-bottom: 150px; /* must be same height as the footer */
}
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
</style>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
<div id="main">
<div id="content">
<!-- Main content here -->
</div>
</div>
</div>
<div id="footer">
<!-- Footer content here -->
</div>
</body>
</html>
You can see a working example here: http://jsfiddle.net/dZDUR/
Resize the right-hand "Result" pane to be shorter/taller than the text to see the scroll bar appear / disappear.
As per the CSS Sticky Footer how-to, you can insert your normal 'column' layout inside the main div.
