如何讓子div佔據父div高度

Question

我想知道子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）。 我曾嘗試應用高度：100％！對.inner和.npv都很重要，但仍無法解決佔用父級div高度的子div問題。 問題佔據

Answer 1

標記

<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標籤。

Answer 2

設置寬度和高度爲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; 
} 

Answer 3

有類似的類的實例上「 Increase the height of a nested(child) div to the occupy the height of its parent div「，您可以將其用作參考。

建議：
- 父DIV設置位置：絕對
- 兒童DIV設置的位置是：絕對的;高度：100％;
或
position：absolute;頂部：0;底部：0;