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;}
you can use css to set the body tag to these settings:
body
{
padding:0px;
margin:0px;
width:100%;
height:100%;
}
Don't give exact heights, but relative ones, adding up to 100%. For example:
#content {height: 80%;}
#footer {height: 20%;}
Add in
html, body {height: 100%;}
As another guy described here, all you need to do is add
height: 100vh;
to the style of whatever you need to fill the screen
Try:
#content{ background-color:#F3F3F3; margin:auto;width:70%;height:77%;}
#footer{width:100%;background-color:#666666;height:22%;}
(77% and 22% roughly preserves the proportions of content and footer and should not cause scrolling)
Fixed positioning will do what you need:
#main
{
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
}
Source: Stackoverflow.com