How to make the web page height to fit screen height

Question

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;}

Possible duplicate of [Make div 100% height of browser window](https://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window) — Jean-François Corbett, Sep 15 '17 at 18:53

Claudix · Accepted Answer · 2014-02-20T08:27:32.503

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>

score 26 · Answer 2 · edited May 19 '14 at 12:48

26

Fixed positioning will do what you need:

#main
{         
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
}

edited May 19 '14 at 12:48

nckbrz

688
1
6
19

answered Aug 08 '12 at 16:00

Faust

14,321
9
52
109

score 24 · Answer 3 · edited May 23 '17 at 11:46

24

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

edited May 23 '17 at 11:46

Community

1
1

answered Aug 30 '15 at 02:23

davidchuyaya

3,710
2
14
25

score 5 · Answer 4 · edited Apr 22 '15 at 14:42

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%;}

edited Apr 22 '15 at 14:42

Olatunde Garuba

1,039
1
16
21

answered Aug 08 '12 at 16:02

Bakabaka

1,485
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

score 0 · Answer 5 · answered Aug 08 '12 at 16:01

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)

answered Aug 08 '12 at 16:01

Gordon Bailey

3,803
19
28

score 0 · Answer 6 · edited May 19 '14 at 12:47

0

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

body
{
padding:0px;
margin:0px;
width:100%;
height:100%;
}

edited May 19 '14 at 12:47

nckbrz

688
1
6
19

answered Aug 08 '12 at 16:05

ram

253
1
5

score 0 · Answer 7 · answered Mar 25 '21 at 09:38

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);

score 0 · Answer 8 · answered Apr 20 '21 at 15:03

0

Make sure you override the original styling by adding important.

height: 100vh !important;

answered Apr 20 '21 at 15:03

NoviceDeveloper

1,221
3
14
38

How to make the web page height to fit screen height

8 Answers8

Linked

Related