Setting HTML Height To 100% Eliminates Scrolling
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>
<div class="container">
<div class="row1"> ...needs to be 15% height </div>
<div class="row2"> ...needs to be 70% height </div>
<div class="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)/100
var 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 */<div class="row1"> ...needs to be 15% height </div>
<div class="row2"> ...needs to be 70% height </div>
<div class="row3"> ...needs to be 15% height </div>
Post a Comment for "Setting HTML Height To 100% Eliminates Scrolling"