Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make the web page height to fit screen height

Tags:

html

css

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;} 
like image 639
Joshua Avatar asked Aug 08 '12 15:08

Joshua


1 Answers

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> 
like image 64
Claudix Avatar answered Oct 12 '22 05:10

Claudix