How to make the web page height to fit screen height

user_991234 0
Viewed 179181

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;}
css html
9 Answers

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

Make sure you override the original styling by adding important.

height: 100vh !important;
user_15764130

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>
user_4960970
Related