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

Question

我在使用height时遇到问题。 我在页面中使用了height：100％作为div。 我为此设置了背景色。 当浏览器最大化时，它可以正常工作。 但是，当调整大小时，我的div无法正确呈现。

我的问题是，当我调整浏览器窗口的大小时，div会出现滚动，但整个div的背景色却无法呈现。 它仅针对调整窗口大小时看到的部分进行渲染。

我的风格课

html,body{height:100%;} 
.rightDiv{  height:100%;width: 39%;background: #3F5D91;float: right;color: #F0F0F0;}

请帮助我摆脱这个问题。

提前致谢。

Answer 1

我已经使用本地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>

在Firefox 18.0.2 / Windows7上，我会在右侧看到div（蓝色），并且在全屏显示或调整大小时会看到滚动条。

滚动显示div的其余部分，而背景颜色保持不变，因此我无法解释您为什么看到它。

但是，我想知道您是否真的想看到滚动条。 将元素设置为100％通常意味着您只希望它填充视口，而不是溢出。
如果是这种情况，则需要删除浏览器应用于包含div的元素（例如主体）的任何默认边距。 设置：

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

将使div合适。

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

Answer 2

我有这样的问题。 这里只有一件事对我有帮助。 当我需要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;
}

其他元素可能涉及的类似事物。

调整浏览器大小时，高度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