用相对 div 填充剩余高度
[英]Fill remaining height with relative div
问题描述
I have three div
我有三个div
div.main = encloses two child div
div.head = uses about 10%~20% of div.main height
div.body = uses about 80%~90% of div.main height
I want div.body to fill the remaining height space left after allocating div.head 's height.我希望div.body在分配div.head的高度后填充剩余的高度空间。
I would like to do this with position: relative;我想用position: relative;来做到这一点position: relative; as much as possible.越多越好。
I am using percent values for the height and width and not pixels as screen resolutions may vary.我使用的是高度和宽度的百分比值，而不是像素，因为屏幕分辨率可能会有所不同。 I want it to resize itself automatically depending on the screen resolution of who may see it.我希望它根据可能看到它的屏幕分辨率自动调整大小。
I noticed that if I use pixel values it works but not for percent.我注意到，如果我使用像素值，它可以工作，但不能用于百分比。
2 个解决方案
解决方案1
1 2015-09-10 05:23:47
In the following code I have created a main div with color red(just to divide it), and the 2 divs inside it, one head and one body with color yellow and green respectively.在下面的代码中，我创建了一个红色的主 div （只是为了分割它），以及其中的2 个 div ，一个头部和一个身体分别为黄色和绿色。 I hope this is what you want -我希望这是你想要的 -
<html>
<head>
<title>try</title>
<style type="text/css">
.main {
position: relative;
height:100%;
width:100%;
border:5px solid black;
background-color: red;
}
.head{
position: relative;
height:20%;
width:100%;
background-color: yellow;
}
.body{
position: relative;
height:80%;
width:100%;
background-color: green;
}
</style>
</head>
<body>
<div class="main"> //main div having height & width 100%
<div class="head"> //head with color yellow of 20%
</div>
<div class="body"> //head with color yellow of 80%
</div>
</div>
</body>
解决方案2
0 2015-09-10 10:02:00
Position relative won't help you here..it doesn't size things by itself nor is it flexible as you seem to think.位置相对在这里对您没有帮助......它本身不会调整大小，也不会像您认为的那样灵活。
I can think of a couple of way to do this (there may be others).我可以想到几种方法来做到这一点（可能还有其他方法）。
Table Display表格展示
* { margin: 0; padding: 0; } body { text-align: center; } main { height: 250px; border:1px solid grey; width: 250px; display: inline-table; /* usually just "table"...this is just to put the two tables side by side */ margin: 25px; } header { display: table-row; background: lightblue; border-bottom:1px solid red; } .body { display: table-row; height: 100%; background: lightgreen; }
<main> <header><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, sed?</p> </header> <div class="body ">I'm the body</div> </main> <main> <header><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique porro sunt placeat incidunt, quo vero. Assumenda deserunt excepturi fugit incidunt?</p> </header> <div class="body ">I'm the body</div> </main>
Flexbox弹性盒
body { text-align: center; } main { height: 250px; border:1px solid grey; width: 250px; display: inline-flex; /* usually just "flex" ....this is to put the elements side by side */ flex-direction: column; margin: 10px; vertical-align: top; } header { background: lightblue; border-bottom:1px solid red; } .body { flex:1; background: lightgreen; }
<main> <header><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, sed?</p> </header> <div class="body"></div> </main> <main> <header><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique porro sunt placeat incidunt, quo vero. Assumenda deserunt excepturi fugit incidunt?</p> </header> <div class="body "></div> </main>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.