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

问题描述：

我在使用身高时发生问题。我在页面中使用了height：100％。我为此设置了背景颜色。它在浏览器最大化的情况下工作正常。但是当它调整大小时，我的div不能正确渲染。调整浏览器大小时，身高100％无法正常工作

我的问题是当我调整浏览器窗口的大小时，滚动显示为我的div，但背景颜色不呈现为我的整个div。它仅在调整窗口大小时呈现给我看过的部分。

我的styleClass

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

PLZ帮我走出这个问题。

在此先感谢。

如果你提供你的代码..这会让我们更好地帮助你.. – sasi 2013-02-11 06:57:03

我没有看到任何问题。 http://jsfiddle.net/bz8p5/ – fredsbend 2013-02-11 07:21:19

是的......它在jsfiddle.net中正常工作。但是当我在这里有一些内部div。，在浏览器窗口中出现一些问题 – Arun 2013-02-11 07:28:06

答

我测试过这种使用本地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与背景颜色不变，所以我不能说明你为什么看到这一点。

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

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

将使div适合正确。

顺便说一句，网站如CodePen和JSFiddle报价申请重置样式表像Normalize和Reset的选项，你应该留意这些被预选，当你创建一个新的笔/小提琴（的jsfiddle做到这一点的正常化）。

答

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

类似的事情，你可以涉及到其他因素。

感谢Anilka为你的答案。但-moz-background-size：cover;它是一个Firefox特定的属性。希望它不适用于其他浏览器。 – Arun 2013-02-11 10:16:47

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

相关推荐