1

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

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

我的风格课 

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

请帮助我摆脱这个问题。

提前致谢。

4

2 回答 2

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，当你创建一个新的 pen/fiddle 时，你应该注意这些被预先选择（JSFiddle 为 Normalize 执行此操作）。

于 2013-02-11T14:22:14.007 回答
0

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

您可以将类似的事情涉及到其他元素。

于 2013-02-11T08:21:37.523 回答