如何调整div到客户视口高度的大小? [英] How to resize a div to clients viewport height?

问题描述

好吧，所以我想拥有一系列的div，它们是用户浏览器窗口的确切宽度和高度，而与屏幕大小无关.我可以轻松地使div的水平宽度为"width:100％;".但我无法解决如何使高度自动伸展的问题.我猜想我需要使用一些JavaScript来判断高度，然后再用另一块来调整单独的div的大小.不幸的是，我是一个完整的javascript n00b，经过两个小时看似徒劳的搜索并提出了大约100个解决方案"，这是id所获得的(我确信在某个时候我可能更接近答案了):

Ok, so i want to have a series of divs which are the exact width and height of the user's browser window, regardless of the screen size. I can easily make the divs stretch horizontally with "width: 100%;" but i cant work out how to make the height stretch itself. I am guessing that i need to use some bit of javascript to judge the height, and then another piece to resize the seperate divs. Unfortunately I am a complete javascript n00b and after two hours of seemingly fruitless searching and coming up with about 100 "solutions" this was as far as id gotten (Im sure that at some point I have probably been closer to the answer):

var viewportHeight = "height:" + document.documentElement.clientHeight; 

getElementById('section-1').setAttribute('style', viewportHeight);



<div class="section" id="section-1"></div>

<div class="section" id="section-2"></div>

<div class="section" id="section-3"></div>

修改:嗯，我应该更清楚一点，我试图让所有三个div占据整个屏幕，所以您必须向下滚动才能看到每个div-就像单独的幻灯片一样.想法是每个人都占据整个屏幕，因此直到向下滚动才能看到下一部分，而不是三个div占据了屏幕的三分之一.

edit: ah i should be more clear, im attempting to have all three divs take up the entire screen, so you have to scroll down to see each one - almost like seperate slides. The idea is that each one takes up the entire screen so you cant see the next section until you scroll down, rather than having three divs which take up a third of the screen.

推荐答案

如果您还没有尝试过，则需要使用CSS来查看DOM中元素的parent:child继承.

If you haven't already tried it, you'll want to look at parent:child inheritance of elements within the DOM by way of using CSS.

我要应力 的是，每个给您JS hacks来实现此目标的人不仅给您带来了过大的杀伤力(您确实要求JavaScript解决方案，所以他们给了你！)，但这也是对标准的偏离.HTML用于结构，CSS用于表示，JavaScript用于行为方面...在加载时将div设置为视口的宽度是PRESENTATION方面，应在CSS中完成...而不是JavaScript.如果您尝试基于事件或用户交互来更改宽度，那么可以，JavaScript是您的朋友……但是现在仅坚持使用HTML和CSS.

What I want to STRESS is that everyone giving you JS hacks to accomplish this is not only providing you with overkill (YOU did ask for a JavaScript solution, so they gave it to you!), but it's also a deviation from standards. HTML is for structure, CSS is for presentation, and JavaScript is for behavioral aspects... setting a div to the width of the viewport on load is a PRESENTATION aspect and should be done in CSS... not JavaScript. If you were trying to change the width based on events or user interaction, then yes JavaScript is your friend... but stick with just HTML and CSS for now.

诀窍在于，大多数元素的高度都未定义-高度随后由该元素所包含的内容定义.

The trick is that most elements have an undefined height - and height is later defined by the content that the element holds.

如果要欺骗"元素使其具有除默认值以外的高度，则必须显式定义它.由于您要继承从视口的高度，因此必须在顶部定义高度并将其降低...

If you want to 'trick' an element into having a height other than what it wants to default to, you'll have to explicitly define it. Since you want to inherit your height from the viewport, you'll have to define the height at the top and bring it down...

您可能很幸运，可以完全避免使用JavaScript(不必要).只需使用CSS.

You might be in luck and can avoid JavaScript altogether (unnecessary). Just use CSS.

尝试类似的东西:

html, body {
    height: 100%;
    width: 100%;
}

现在，当您稍后尝试设置 div 时，请指定 width:100％，然后高度就会从html->正文中继承-> div.

Now, when you try to set your div's later on, specify width: 100% and the height gets inherited from the html --> body --> div.

尝试一下，看看是否能解决您的问题-如果不能解决，请把我们指向带有代码的网站，pastebin或SOMETHING，我们可以向您展示如何做(而您为代码发布的内容是尝试使用JavaScript(仅占代码的一部分)-将全部内容发布到服务器或temp网站(如pastebin).

Try that and see if that solves your problem - if not, point us to a website, a pastebin, or a SOMETHING with code in it that we can just show you how to do it (whereas what you posted for code was an attempt in JavaScript which is only 1 part of the code - post the full thing either to a server or temp site like pastebin).

这是我编写的一些示例代码(在Chromium中测试):

Here is some sample code I wrote (tested in Chromium):

HTML:

<html>
<head>
    <title>Test Divs at 100%</title>
    <link rel="stylesheet" type="text/css" href="divtest.css"
</head>
<body>
<div class="test1">aef</div>
<div class="test2">aef</div>
<div class="test3">aef</div>
</body>
</html>

CSS:

html, body {
    width: 100%;
    height: 100%;
    background-color: #793434;
    padding: 0;
    margin: 0;
}

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

.test1 {
    background-color: #E3C42E;
}

.test2 {
    background-color: #B42626;
}

.test3 {
    background-color: #19D443
}

这篇关于如何调整div到客户视口高度的大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！