CODEWITHSUNDEEP
htmlcss
Joshua
Joshua

Reputation: 2295

How to make the web page height to fit screen height

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

Upvotes: 33

Views: 189146

Answers (9)

Chris May
Chris May

Reputation: 822

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>

Upvotes: 1

NoviceDeveloper
NoviceDeveloper

Reputation: 1290

Make sure you override the original styling by adding important.

height: 100vh !important;

Upvotes: 0

Tri Tran
Tri Tran

Reputation: 151

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

Upvotes: 0

davidchuyaya
davidchuyaya

Reputation: 4011

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

Upvotes: 26

Bakabaka
Bakabaka

Reputation: 1505

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

Upvotes: 5

Faust
Faust

Reputation: 15404

Fixed positioning will do what you need:

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

Upvotes: 25

ram
ram

Reputation: 253

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

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

Upvotes: 0

Claudi
Claudi

Reputation: 5416

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>

Upvotes: 29

Gordon Bailey
Gordon Bailey

Reputation: 3911

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)

Upvotes: 0

Related Questions