Question

我在使用身高方面遇到了问题。我在页面中使用了高度：100％的div。我为此设置了背景颜色。它在浏览器最大化时工作正常。但是当它被调整大小时，我的div没有正确呈现。

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

我的样式

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

Plz帮助我摆脱这个问题。

提前致谢。

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 个答案: