How to Make The Web Page Height to Fit Screen Height

How to make the web page height to fit screen height

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>

CSS - Make page content fill all the screen height

The reason you were having trouble getting the #body div to be the full height of the remaining space is because each of the wrapping elements needed height:100% not just one of them. That means #main, #body, #page and #menu.

html {    height: 100%;}
body {    margin:0;    padding:0;    width:100%;    height: 100%;    min-height: 100%;    background: #DEDEDE;}
#main {    width: 100%;    min-height:100%;    position:relative;  height:100%;}
#head {    width: 100%;    height: 58px;    border-bottom: 1px solid #115293;    background-color: #1976D2;}
#head #head_content {    width: 1000px;    padding: 6px;    color: #FFFFFF;    margin: 0 auto;    text-align: center;}
#body {  height:100%;    width: 1000px;    margin: 0 auto;    border-left: 1px solid #BFBFBF;    border-right: 1px solid #BFBFBF;}
#body #menu {    float: left;    width: 220px;    background-color: #94C9FF;  height:100%;}
#body #page {    overflow: hidden;    padding: 10px;    color: #5C5C5C;    border-left: 1px solid #BFBFBF;    background-color: #FFFFFF;  height:100%;}
#foot {    position:absolute;    bottom: 0;    left: 0;    width: 100%;    height: 58px;    color: #FFFFFF;    border-top: 1px solid #115293;    background-color: #1976D2;}
#foot #foot_content {    position: relative;    width: 1000px;    padding: 6px;    margin: 0 auto;    text-align: center;}

<html ><head>    <title>Test</title></head><body>
    <div id="main">
        <div id="head">            <div id="head_content">                HEARDER            </div>        </div>
        <div id="body">
            <div id="menu">                MENU            </div>
            <div id="page">                PAGE CONTENT            </div>
        </div>
        <div id="foot">            <div id="foot_content">                FOOTER            </div>        </div>
    </div>
</body></html>

How can an html element fill out 100% of the remaining screen height, using css only?

The trick to this is specifying 100% height on the html and body elements.
Some browsers look to the parent elements (html, body) to calculate the height.

<html>
    <body>
        <div id="Header">
        </div>
        <div id="Content">
        </div>
    </body>
</html>

html, body
{
    height: 100%;
}
#Header
{
    width: 960px;
    height: 150px;
}
#Content
{
    height: 100%;
    width: 960px;
}

Set div height to fit to the browser using CSS

Setting window full height for empty divs

1st solution with absolute positioning - FIDDLE

.div1 {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 25%;
}
.div2 {
  position: absolute;
  top: 0;
  left: 25%;
  bottom: 0;
  width: 75%;
}

2nd solution with static (also can be used a relative) positioning & jQuery - FIDDLE

.div1 {
  float: left;
  width: 25%;
}
.div2 {
  float: left;
  width: 75%;
}

$(function(){
  $('.div1, .div2').css({ height: $(window).innerHeight() });
  $(window).resize(function(){
    $('.div1, .div2').css({ height: $(window).innerHeight() });
  });
});

Fit image to screen height

What you are trying to do is fit the image size to the viewport's height, not the screen's.

The viewport is the actual portion of the screen where your app will be rendered (browser window - browser interface).

To achieve that, you could use height: 100vh, where one 1vh is equal to 1% of the viewport's height.

Thus, your image will always be exactly as tall as the viewport, that is the "screen" in your case.

How to Make The Web Page Height to Fit Screen Height