使div适合初始屏幕

问题描述：

我想使div适合用户屏幕的初始高度和宽度。使div适合初始屏幕

我认为下面粗略地画出示意图说明这更好：

enter image description here

#div 
{ 
width: 100%; 
height: 100%; 
}

似乎并没有工作

至少有一百个类似的问题已经在SO ... – Shad 2011-06-08 22:40:57

答

如果我理解正确的话（有一些造成混乱这里）：

http://jsfiddle.net/zRpNp/

#screenFiller { 
    position: absolute; 
    top: 0; right: 0; bottom: 0; left: 0; 
    border: 15px solid orange 
}

您可能是position: fixed版本之后：http://jsfiddle.net/zRpNp/1/

是的，它的工作原理！但是，你认为它可以在IE8 + – jonnnnnnnnnie 2011-06-08 22:48:27

的所有浏览器上运行。 – thirtydot 2011-06-08 22:49:01

谢谢，确认：http：//browsershots.org/http://jsfiddle.net/zRpNp/ – jonnnnnnnnnie 2011-06-08 22:51:56

答

在一个div的高度设置为100％只意味着你的DIV将填充100％的容器;不是100％的网页。

我会建议你要么需要使用一个最小高度声明你的股利或它的容器或使用JavaScript来找到用户的屏幕的初始高度（因为每个人都会有一些略有不同），并设置为在你的div上的内联样式。

代码的东西沿着以下的线将返回屏幕尺寸：

var x,y; 
if (self.innerHeight) // all except Explorer 
{ 
    x = self.innerWidth; 
    y = self.innerHeight; 
} 
else if (document.documentElement && document.documentElement.clientHeight) 
// Explorer 6 Strict Mode 
{ 
    x = document.documentElement.clientWidth; 
    y = document.documentElement.clientHeight; 
} 
else if (document.body) // other Explorers 
{ 
    x = document.body.clientWidth; 
    y = document.body.clientHeight; 
}

+1用于识别height = 100％是相对于必须明确设置的父容器。 -1没有使用纯CSS解决方案，使用位置属性来设置所有4条边，如同十三点一样。 – 2011-06-08 23:14:41

答

<html><body style="margin: 0;"> 
<div style="height: 100%; width: 100%; background: #ccc;">a</div> 
<div style="background: #777;height: 100%; width: 100%">b</div> 
</body> 
</html>

作品对我来说

答

你可以用CSS也完全做到这一点：

html, body { 
    margin: 0; 
    padding: 0; 
    min-height: 100%; 
    width: 100%; 
} 

div { 
    height: 100%; 
    width: 100%; 
}

答

你的CSS风格是寻找id="div"不是一个div标签。这应该假设你的DIV由<body>或另一个100％，100％，html元素父：

<div id="fullViewPort"> 
    My Content 
</div> 

#fullViewPort { 
    width: 100%; 
    height: 100%; 
}

答

<style> 
    body { 
     margin:0; 
     padding:0; 
    } 
    #try {  
     height:100%; 
     width:100%; 
     margin:0; 
     padding:0; 
     clear:both; 
    } 
    #next { 
     height:10%; 
    } 
    </style> 

    <body> 
    <div id="try">hello1</div> 
    <div id="next">hello2</div> 
</body>

适合我。

答

另一种方式仅适用于CSS来做到这一点...

http://jsfiddle.net/pxfunc/qQ45K/

html, body {height:100%;} /* explicitly set html & body height */ 

#fillScreen { 
    position:relative; 
    top:0; 
    left:0; 
    height:100%; 
    width:100%; 
}

答

我认为这是最简单的方法......通过让浏览器告诉他高度...使用Java脚本

<html> 
<head> 
<title>viewport</title> 
<style type="text/css"> 
    * { padding:0; margin:0; } 
    #test { background:#aaa; height:100%; width:100%; } 
</style> 
<script type="text/javascript"> 
    window.onload = function() { 
    var height = getViewportHeight(); 
    alert("This is what it looks like before the Javascript. Click OK to set the   height."); 
    if(height > 0) 
     document.getElementById("test").style.height = height + "px"; 
    } 
    function getViewportHeight() { 
    var h = 0; 
    if(self.innerHeight) 
     h = window.innerHeight; 
    else if(document.documentElement && document.documentElement.clientHeight) 
     h = document.documentElement.clientHeight; 
    else if(document.body) 
     h = document.body.clientHeight; 
    return h; 
    } 
</script> 
</head> 
<body> 
    <div id="test"> 
    <h1>Test</h1> 
    </div> 
    </body> 
</html>`

答

个人而言，我喜欢纯CS S解决方案。只需使用vh单元。

#filldiv 
{ 
    height: 100vh; 
}

这将使div填充浏览器窗口的高度。

另外，您还可以使其填充浏览器窗口的宽度，这只使用vw单位。

#filldiv 
{ 
    width: 100vw; 
}

两者都显示在this fiddle

我个人很喜欢这两个单位的，因为它们可以用于东西，如字体大小动态调整。

你会如何做宽度而不是高度？ – 2015-10-11 18:25:30

@GmanSmith我会很快更新答案。 – Tinfoilboy 2015-10-11 18:48:57

@Tinfoilboy这真的很高雅！你知道它在不受支持的浏览器中如何破解吗？ – Dionysis 2016-02-23 22:32:14

使div适合初始屏幕

相关推荐