[英]div height 100 percent
<img id='imgT' src="...">
<div id="divL"></div>
<div id="divR"></div>
css 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;
}
So, how can I make the two divs height 100 percent, ie from the bottom of image to the bottom of page. 那么,我怎样才能使两个div高度达到100%,即从图像底部到页面底部。
You need to set the height of html
and body
to 100% too before. 您之前需要将
html
和body
的高度设置为100%。 Then you can set your element height 100%. 然后,您可以将元素高度设置为100%。
body, html {
height: 100%;
}
#divL, #divR {
height: 100%;
}
There are a few options you may find useful: 您可能会发现一些有用的选项:
vh (viewport height) vw (viewport width) vmin (viewport minimum length) vmax (viewport maximum length) Now, let's have a look at a real example. vh(视口高度)vw(视口宽度)vmin(视口最小长度)vmax(视口最大长度)现在,让我们看一个真实的例子。 Imagine you want to create a website with two sections, each one of them with the size of the browser window.
想象一下,您想要创建一个包含两个部分的网站,每个部分都具有浏览器窗口的大小。
Here's just a simplified code example of the HTML: 这里只是HTML的简化代码示例:
<div id="welcome">
your content on screen 1
</div>
<div id="projects">
your content on screen 2
</div>
and here's the CSS using vh: 这是使用vh的CSS:
div#welcome {
height: 100vh;
background: black;
}
div#projects {
height: 100vh;
background: yellow;
}
You can see more in: 你可以看到更多:
http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/ http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.