Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Setting Html Height To 100% Eliminates Scrolling

Post a Comment
I cannot figure out why this is not working. I need to set the height of HTML and body to 100% for some setting the height of the three rows inside the page, but when I do this i

Solution 1: 

html, body {
      height: 100vh;
      width: 100%;
      margin: 0;
      padding: 0;
      background-color: #f7f7f7;
      overflow:scroll;
    }
    .container{ 
      height: 100%;
      width: 100%;
      display:inline-block;
     }
    .row1 {height:15%;width: 100%;display:inline-block;} 
    .row2 {height:70%;width: 100%;display:inline-block;} 
    .row3 {height:15%;width: 100%;display:inline-block;} 
<html><body><divclass="container"><divclass="row1"> ...needs to be 15% height </div><divclass="row2"> ...needs to be 70% height </div><divclass="row3"> ...needs to be 15% height </div><div></body></html>

Added style element and div container & take of the comment //

Solution 2:

You can Try this Code. Browser screen Sizes are different.So we wand to set height According to Browser Screen Size.

Jquery 

$(document).ready(function(){

var height =$( window ).height();
alert(height);
var height1 =($( window ).height() *15)/100var height2 =($( window ).height() *70)/100

$('.row1').css("height",height1);
$('.row2').css("height",height2);
$('.row3').css("height",height1);
})

Solution 3:

  • As it is, it won't scroll since it should take up 100% viewport's height.
  • Your css comments are wrongly formatted, use /* comment */ instead.

Snippet:

html,
body {
  height: 100%;
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #f7f7f7;
  overflow: scroll;
}
.row1 {height: 15%;} /* header */.row2 {height: 70%;} /* body */.row3 {height: 15%;} /* footer */
<divclass="row1"> ...needs to be 15% height </div><divclass="row2"> ...needs to be 70% height </div><divclass="row3"> ...needs to be 15% height </div>

Post a Comment for "Setting Html Height To 100% Eliminates Scrolling"