调整浏览器大小时，高度100％无法正常工作

Question

I am having Issue in using height . 我在使用height时遇到问题。 I have used height:100% for a div in my page. 我在页面中使用了height：100％作为div。 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. 但是，当调整大小时，我的div无法正确呈现。

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. 我的问题是，当我调整浏览器窗口的大小时，div会出现滚动，但整个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. 提前致谢。

Answer 1

I've tested this using a local html file: 我已经使用本地html文件对此进行了测试：

<!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. 在Firefox 18.0.2 / Windows7上，我会在右侧看到div（蓝色），并且在全屏显示或调整大小时会看到滚动条。

Scrolling reveals the rest of the div with the background colour intact, so I can't account for why you see that. 滚动显示div的其余部分，而背景颜色保持不变，因此我无法解释您为什么看到它。

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. 将元素设置为100％通常意味着您只希望它填充视口，而不是溢出。
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. 如果是这种情况，则需要删除浏览器应用于包含div的元素（例如主体）的任何默认边距。 Setting: 设置：

 html,body{margin:0; height:100%;}

will make the div fit properly. 将使div合适。

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). 顺便说一句，诸如CodePen和JSFiddle之类的站点提供了应用诸如Normalize和Reset之类的重置样式表的选项，并且在创建新的笔/小提琴时（当JSFiddle为Normalize执行此操作时）您应注意这些被预先选择。

Answer 2

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: 当我需要100％的身高作为身体元素时，我必须为他设置以下样式：

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. 其他元素可能涉及的类似事物。

调整浏览器大小时，高度100％无法正常工作

问题描述

2 个解决方案

解决方案1
1 已采纳 2013-02-11 14:22:14

解决方案2
0 2013-02-11 08:21:37

调整浏览器大小时，高度100％无法正常工作

问题描述

2 个解决方案

解决方案1 1 已采纳 2013-02-11 14:22:14

解决方案2 0 2013-02-11 08:21:37

解决方案1
1 已采纳 2013-02-11 14:22:14

解决方案2
0 2013-02-11 08:21:37