CSS/HTML：使2個孩子填充容器div的高度的50％

Question

這似乎很簡單，但我找不到任何直接的方法來執行此操作。

代碼：（HTML）

  <div class="col-6-12 subcontent-outer"> 
      <div class="subcontent"> 
       <h1>Header</h1> 
       <p> 
        Stuff 
      </div> 
      <div class="subcontent"> 
       <h1>Header</h1> 
       <p> 
        Stuff 
      </div> 
     </div> 

所以我需要每個.subcontent填補.subcontent-outer的高度，這在現代的browers工程的50％，容器div的高度可能會改變。

我怎樣才能做到這一點？

三江源

哈雷

Answer 1

你忘了關段落。關閉它們，就像這樣：

 <div class="col-6-12 subcontent-outer"> 
      <div class="subcontent"> 
       <h1>Header</h1> 
       <p> 
        Stuff 
       </p> 
      </div> 
      <div class="subcontent"> 
       <h1>Header</h1> 
       <p> 
        Stuff 
       </p> 
      </div> 
     </div> 

如果還沒有幫助，試試這個：

.subcontent-outer, .subcontent{ 
    float: left; 
} 

.subcontent{ 
    height: 50%; 
} 

編輯：

設置一個子元素的高度，當然百分比要求父元素具有指定的高度。

在這種情況下，您可以輕鬆地測試，與：

.subcontent-outer{ 
    height: 500px; /* for example */ 
} 

.subcontent-outer, .subcontent{ 
    float: left; 
} 

.subcontent{ 
    height: 50%; 
}