33

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;}
Musa
  • 96,336
  • 17
  • 118
  • 137
Joshua
  • 2,275
  • 7
  • 41
  • 57

9 Answers9

29

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>
Claudi
  • 5,224
  • 17
  • 30
25

Fixed positioning will do what you need:

#main
{         
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
}
nckbrz
  • 688
  • 1
  • 6
  • 20
Faust
  • 15,130
  • 9
  • 54
  • 111
25

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

Community
  • 1
  • 1
davidchuyaya
  • 3,960
  • 2
  • 16
  • 26
5

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%;}
Olatunde Garuba
  • 1,049
  • 1
  • 16
  • 21
Bakabaka
  • 1,505
  • 1
  • 13
  • 21
  • Where does the absolute height come from. 100% of 0 is 0. How do you tell it what 100% is to begin with? – nckbrz May 19 '14 at 14:21
  • 1
    100% is the full (current) size of the viewport. So you don't tell it, the browser actually determines the value of 100% by itself. – Bakabaka May 19 '14 at 14:23
0

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)

Gordon Bailey
  • 3,881
  • 20
  • 28
0

you can use css to set the body tag to these settings:

body
{
padding:0px;
margin:0px;
width:100%;
height:100%;
}
nckbrz
  • 688
  • 1
  • 6
  • 20
ram
  • 253
  • 1
  • 5
0

using this, replace your class "home" with your own

(function ($) {
    $(function(){"use strict";
        $('.home').css({'height':($(window).height())+'px'});
        $(window).resize(function(){
        $('.home').css({'height':($(window).height())+'px'});
        });
    });
  
  })(jQuery);
Tri Tran
  • 131
  • 1
  • 4
0

Make sure you override the original styling by adding important.

height: 100vh !important;
NoviceDeveloper
  • 1,270
  • 3
  • 15
  • 41
0

I've used a CSS solution that has proved flexible.

You need choose one element to be the one that is full height. It also needs to be a parent to every content block. This can be the <body> element or anywhere in the DOM.

Additionally, you must designate one child to grow to make up whatever space is needed to stretch to fill the screen.

.content-parent {
  min-height: 100vh;  /* Forces to always fill the screen vertically... */
  min-height: -webkit-fill-available;  /* ...except on mobile, when you want to stay within the chrome */
  display: flex;  /* Enable content to stretch... */
  flex-direction: column;  /* ...vertically */
}

.filler-child {
  flex-grow: 1;  /* Designates this element to stretch to fill */
}

Example HTML:

<html>
  <head>...</head>
  <body>
    <div class="parent">
      <div class="hero">...</div>
      <div class="content filler-child">...</div>
      <div class="footer">...</div>
    </div>
  </body>
</html>
Chris May
  • 607
  • 7
  • 12