I need to make my web page height to fit the height of the screen size without scrolling.
HTML
<body> <form id="form1" runat="server"> <div id="main"> <div id="content"> </div> <div id="footer"> </div> </div> </form> </body>
CSS
#content{ background-color:#F3F3F3; margin:auto;width:70%;height:700px;} #footer{width:100%;background-color:#666666;height:200px;}
A quick, non-elegant but working standalone solution with inline CSS and no jQuery requirements. AFAIK it works from IE9 too.
<body style="overflow:hidden; margin:0"> <form id="form1" runat="server"> <div id="main" style="background-color:red"> <div id="content"> </div> <div id="footer"> </div> </div> </form> <script language="javascript"> function autoResizeDiv() { document.getElementById('main').style.height = window.innerHeight +'px'; } window.onresize = autoResizeDiv; autoResizeDiv(); </script> </body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With