I have posted Image of my webpage and also posted html code and CSS which I apply on it.I want that my #main should display with fixed height on the page as a respective laptop resolution. So how much size should I give it? Another issue I'm getting is that, when I try to give height to it, it does not apply. My #main contains a footer too. What changes do I need to apply this in my css? My #main expands in height when I load any content in it. But I want that its height should be fixed.
HTML\[code\]<!DOCTYPE html><html><head id="Head1"><body><div class="page"><header></header><div id="main"><h2>Index</h2><footer><hr><p> Copyright (c) 2012</p><hr></footer></div></div></body></html>\[/code\]CSS\[code\]body { background: none repeat scroll 0 0 rgba(0, 117, 149, 0.9); color: #000000; font-family: "Trebuchet MS",Verdana,Helvetica,Sans-Serif; font-size: 0.85em; margin: 0; padding: 0;}.page { margin-left: auto; margin-right: auto; width: 98%; }#main { background-color: #FFFFFF; border-radius: 4px 4px 4px 4px; padding: 30px 30px 15px;}footer, #footer { background-color: #FFFFFF; border-radius: 0 0 4px 4px; color: #999999; font-size: 0.9em; line-height: normal; margin: 0; padding: 10px 0; text-align: center;}header, footer, nav, section { display: block;}\[/code\]I want output like this:
I also want that my #main display scroll bar when content load more ... rather than scroll bar display of browser.