css div高度100%

c6ubokkw 于 2022-12-15 发布在其他

关注(0)|答案(2)|浏览(190)

<img id='imgT' src="...">

<div id="divL"></div>
<div id="divR"></div>

CSS

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;
}

小提琴是here
那么，我怎样才能使两个div的高度达到100%，即从图像底部到页面底部。

css

来源：https://stackoverflow.com/questions/19122392/div-height-100-percent

2条答案

按热度按时间

u3r8eeie1#

您需要设置html和body的高度为100%之前。* 然后 * 您可以设置您的元素高度100%。

body, html {
    height: 100%;
}

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

Updated fiddle.

赞(0）回复(0）举报 2022-12-15

kdfy810k2#

您可能会发现以下几个选项很有用：
vh（viewport height）vw（viewport width）vmin（viewport minimum length）vmax（viewport maximum length）现在，让我们来看一真实的例子：假设你想创建一个包含两个部分的网站，每个部分的大小都和浏览器窗口一样。
下面是HTML的一个简化代码示例：

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

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

这是使用vh的CSS：

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

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

您可以在以下位置查看更多信息：
http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/

赞(0）回复(0）举报 2022-12-15

我来回答

css div高度100%

2条答案

相关问题

热门标签

最新问答