[英]how to make child div occupy the parent div height
我想知道子div占據父div高度的可能性。
下面的代碼是我的html:
<div class="container">
<div class="header width100p">
<h2>
Header
</h2>
</div>
<div class="content width100p">
<div class="width29p npv">
<div class="width100p inner">
<p>
navigation
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
</div>
<div class="rtb">
<div class="width100p ql">
<p>
div one
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
<div class="width100p mtbs">
<p>
div two
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
<div class="floatL width100p widdiv">
<div class="floatL width100p">
<div class="floatL width40p incont">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
<div class="floatL width40p incont">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
</div>
<div class="floatL width100p">
<div class="floatL width40p incont">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
<div class="floatL width40p incont">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="footer width100p">
<h2>
Footer
</h2>
</div>
</div>
各自的樣式是:
<style>
*,html{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
.container{
width:960px;
margin:20px auto;
}
.header h2,.footer h2{
text-align: center;
}
.floatL{
float: left;
}
.floatR{
float: right;
}
.clear{
clear:both;
}
.width100p{
width: 100%;
}
.width29p{
width: 29%;
}
.width70p{
width: 70.8%;
}
.header,.footer,.content{
border:1px solid #000;
}
.npv{
border-right: 1px solid #000;
}
.ql,.mtbs{
border-bottom: 1px solid #000;
}
.content{
display: table;
}
.npv, .rtb{
display: table-cell;
}
.width40p{
width: 40%;
}
.incont{
margin: 4%;
background: #ccc;
border:1px solid red;
}
</style>
我想知道(.inner)子div如何占據其父div(.npv)的高度。 我已經嘗試對.inner和.npv應用height:100%!important,但是仍然不能解決child div占用父div高度的問題。 占用問題
標記
<html>
<body>
<div class="outer">
<div class="inner">
</div>
</body>
</html>
的CSS
html, body {
height: 100%;
width: 100%;
}
.outer {
height: 100%; // or set height and width in pixels
width: 100%;
}
.outer .inner {
height: 100%;
width: 100%;
}
為了使百分比高度起作用,
您需要設置其父級中每個父級的高度。
包括html和body標簽。
將高度和寬度設置為100%:
.width100p{
height: 100%; // or set height and width in pixels
width: 100%;
}
.width100p .inner {
height: 100%;
width: 100%;
}
或在html中指定尺寸,並將其顯示為塊:
.width100p {
display:block;
.width100p .inner {
display:block;
}
在“ 將nested(child)div的高度增加到其父div的高度 ”上有一個類似的示例,您可以將其用作參考。
建議:
-對於父級div設置位置:絕對
-對於子div設置位置:絕對; 高度:100%;
要么
位置:絕對的; 頂:0; 底部:0;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.