如何垂直分割html頁面並設置完整的高度背景？

注意：我使用bootstrap，如果它可以幫助某種方式。我的問題是，我不能將它設置在HTML或正文類（如一些解決方案建議），因爲我不希望它每一個頁面。我不知道如何解決這個問題。我只需要在一個頁面中。如何垂直分割html頁面並設置完整的高度背景？

我試圖將它適用於我的自定義DIV，但它不會工作，如果我沒有內容。高度設置爲100％，但依然爲0px，除非我在該div內放入了一些內容。

來源

2015-02-23 skd

'body，html {height：100％}'？ – Drops 2015-02-23 17:11:23

聲音像一個clearfix是需要的。 – 2015-02-23 17:32:52

您可以將類添加到<html>標籤爲您希望有100％的高度

<html class="full-height-page">

然後使用下面

.full-height-page, 
.full-height-page body { 
    height: 100%; 
    min-height: 100%; /* this is necessary */ 
}

來源

2015-02-23 17:08:05 Stickers

首先這個CSS的頁面，這種風格加入到這個特殊的頁

 body, html { 
     height: 100%; 
    }

然後使用這個。該代碼將頁面垂直分爲2列，並將內容垂直對齊。左邊的內容是中心對齊的。僅使用引導類。調用bootstrap 4 beta ver以應用代碼。

<div class="container-fluid h-100"> 
    <div class="row h-100"> 
     <div class="col-sm-6 styled-bg"> 
      <div class="d-flex align-items-center justify-content-center h-100"> 
       <div class="col-sm-6 text-center"> 
        This is left column 
       </div> 
      </div> 
     </div> 
     <div class="col-sm-6"> 
      <div class="d-flex align-items-center h-100"> 
       <div class="col-sm-6"> 
        This is Right column 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

來源

2017-10-31 18:09:49 user1904765

如何垂直分割html頁面並設置完整的高度背景？

回答

相關問題