Height 100% not working properly while resizing browser
Question
I am having Issue in using height . I have used height:100% for a div in my page. And I set a background color for that. It works fine while the browser is maximised. But when it is resized my div is not rendered properly.
My problem is when I resize the browser window , a scroll appears for my div but the background color is not rendered for my whole div. It is rendered only for what portion I have seen when I resize the window.
My styleclass
html,body{height:100%;}
.rightDiv{ height:100%;width: 39%;background: #3F5D91;float: right;color: #F0F0F0;}
Plz help me to get out of this problem.
Thanks in advance.
2 answers
solution1
1 ACCPTED 2013-02-11 14:22:14
I've tested this using a local html file:
<!DOCTYPE html>
<html>
<head>
<style>
html,body{height:100%;}
.rightDiv{height:100%;width: 39%;background: #3F5D91;float: right;color: #F0F0F0;}
</style>
</head>
<body>
<div class="rightDiv">Hello</div>
</body>
</html>
and on Firefox 18.0.2/Windows7 I see the div on the right, coloured blue, and I see a scroll bar when full-screen, or resized.
Scrolling reveals the rest of the div with the background colour intact, so I can't account for why you see that.
However, I'm wondering if you actually want to see the scroll bar. Setting an element to 100% usually means you just want it to fill the viewport, not spill over.
If this is the case, then you need to remove any default margin that the browser applies to elements that contain your div, eg the body. Setting:
html,body{margin:0; height:100%;}
will make the div fit properly.
Incidentally, sites like CodePen and JSFiddle offer the option of applying reset style sheets like Normalize and Reset , and you should watch out for these being pre-selected when you create a new pen/fiddle (JSFiddle does this for Normalize).
solution2
0 2013-02-11 08:21:37
I had such problems. Only one thing helped me here. When I needed 100% height for body element I had to set him this styles:
body {
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
-webkit-background-size: cover; /*makes background cover whole page
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
similar things you can involve to other elements.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.