Html 使 div 适合初始屏幕
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6286128/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making a div fit the initial screen
提问by jonnnnnnnnnie
I want to make a div fit the initial height and width of a users screen.
我想让一个 div 适合用户屏幕的初始高度和宽度。
I think the following crudely drawn diagram explain this better:
我认为以下粗略绘制的图表更好地解释了这一点：
#div
{
width: 100%;
height: 100%;
}
does not seem to work
似乎不起作用
回答by thirtydot
If I understand correctly (there's someroom for confusion here):
如果我理解正确（这里有一些混淆的空间）：
#screenFiller {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 15px solid orange
}
You might be after the position: fixedversion: http://jsfiddle.net/zRpNp/1/
您可能在追求position: fixed版本：http: //jsfiddle.net/zRpNp/1/
回答by Tinfoilboy
Personally I like the pure CSS solution. Just use the vhunit.
我个人喜欢纯 CSS 解决方案。只用本vh机。
#filldiv
{
height: 100vh;
}
That will make the div fill the height of the browser window.
这将使 div 填充浏览器窗口的高度。
In addition, you can also make it fill the width of the browser window, this only uses the vwunit.
另外，你也可以让它填满浏览器窗口的宽度，这只使用vw单位。
#filldiv
{
width: 100vw;
}
Both are shown in this fiddle
两者都显示在这个小提琴中
I personally really like both of these units because they can be used for dynamic resizing of things such as font sizes.
我个人非常喜欢这两个单元，因为它们可用于动态调整字体大小等内容。
回答by unknownguy2002
For clarification...
为了澄清...
I'd use vhand vw(viewport height & viewport width)
我会使用vh和vw（视口高度和视口宽度）
<html>
<body>
<div style="height:100vh;width:100vw">First screen section, fills a whole screen</div>
<div style="height:100vh;width:100vw;">Hmm... this too</div>
</body>
</html>
100% Doesn't work because it fills 100% of a container(body) only, not a screen.
100% 不起作用，因为它只填充了容器（主体）的 100%，而不是屏幕。
Edit: A few browsers don't support it, but I find that most modern browsers do
编辑：一些浏览器不支持它，但我发现大多数现代浏览器都支持
回答by Phil.Wheeler
Setting your height to 100% in a div only means that your div will fill 100% of its container; not 100% of the page.
在 div 中将高度设置为 100% 仅意味着您的 div 将填充其容器的 100%；不是 100% 的页面。
I would suggest that you would either want to use a min-height declaration on your div or its container or use JavaScript to find the initial height of the user's screen (because everybody will have something slightly different) and set that as an inline style on your div.
我建议您要么在 div 或其容器上使用 min-height 声明，要么使用 JavaScript 来查找用户屏幕的初始高度（因为每个人都会有一些略有不同的东西）并将其设置为内联样式你的 div
Code something along the lines of the following will return the screen dimensions:
沿着以下几行编写代码将返回屏幕尺寸：
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;
}
回答by Jordan
You can do this completely with CSS too:
你也可以用 CSS 完全做到这一点：
html, body {
margin: 0;
padding: 0;
min-height: 100%;
width: 100%;
}
div {
height: 100%;
width: 100%;
}
回答by MikeM
another way to do this with CSS only...
仅使用 CSS 执行此操作的另一种方法...
http://jsfiddle.net/pxfunc/qQ45K/
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%;
}
回答by Telwa Gangnam
i think this is the easiest way... by letting the browser tell he height... using java script
我认为这是最简单的方法......让浏览器告诉他高度......使用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>`
回答by Phphelp
<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>
works for me.
为我工作。
回答by Ben Roux
Your css style is looking for an id="div"not a div tag. This should work assuming your div in parented by the <body>or another 100%, 100% html element:
您的 css 样式正在寻找一个id="div"非 div 标签。假设您的 div 由<body>或另一个 100%, 100% html 元素作为父元素，这应该可以工作：
<div id="fullViewPort">
My Content
</div>
#fullViewPort {
width: 100%;
height: 100%;
}
回答by Ascherer
<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>
works for me
为我工作
