Html 潜水高度100%

提琴是

---

那么，如何使两个div的高度达到100%，即从图像底部到页面底部。

之前，您需要将

html

和

body

的高度也设置为100%。然后可以将元素高度设置为100%

body{
    max-width:1024px;
}
#imgT{
    width:100%;
    border:thin solid blue;
    display:block;
}
#divL{
    width:20%;
    height:100px;  // I need 100%
    background:#008080;
    float:left;
}
#divR{
    width:80%;
    height:100px;  // I need 100%
    background:blue;
    float:left;
}

---

您可能会发现以下几个选项很有用：

vh（视口高度） vw（视口宽度） vmin（视口最小长度） vmax（视口最大长度） 现在，让我们看一个真实的例子。假设您要创建一个包含两个部分的网站，每个部分的大小与浏览器窗口的大小相同

下面是一个简化的HTML代码示例：

body, html {
    height: 100%;
}

#divL, #divR {
    height: 100%;
}

您可以在中看到更多信息：

---

很有趣。有没有解释它是如何/为什么这样工作的？为什么

html

和

body

在默认情况下不在

100%

位置？@iamnotmaynard

html

和

body

没有任何指定的默认高度，所以它们返回到

自动

。一个人还必须让所有的家长都100%的身高，这样才能工作。我认为它是一个CSS技巧，因为它在所有浏览器中都不起作用（也就是说有趣）。但是这似乎是当前屏幕/浏览器大小的100%。一个人怎么会让divs有100%个高度，不管页面是多长时间？用HTML 15年，永远不会知道这个……谢谢。

body, html {
    height: 100%;
}

#divL, #divR {
    height: 100%;
}

<div id="welcome">
   your content on screen 1
</div>

<div id="projects">
   your content on screen 2
</div>

div#welcome {
    height: 100vh;
    background: black;
}

div#projects {
    height: 100vh;
    background: yellow;
}