如何在div上設置100％高度？

我需要使用class .gray和.yellow塊的div爲內容高度的100％，即頁眉和頁腳之間的高度爲100％。如何在div上設置100％高度？

請告訴我該怎麼做？

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: Tahoma, Verdana, Segoe, sans-serif; 
 
} 
 

 
#page-content { 
 
    min-height: 100%; 
 
    margin-bottom: -80px; 
 
} 
 

 
#page-buffer { 
 
    height: 80px; 
 
} 
 

 
footer { 
 
    height: 80px; 
 
    background: #f00; 
 
} 
 

 
.yellow { 
 
    height: 100%; 
 
    background-color: yellow; 
 
} 
 

 
.gray { 
 
    background-color: gray; 
 
    height: 100%; 
 
    
 
} 
 

 
.blue { 
 
    background-color: blue; 
 
} 
 
.h100{ 
 
    height: 100%; 
 
}

<div id="page-content"> 
 
    <header class="blue"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-xs-12 "> 
 
      some header 
 
      
 
     </div> 
 
     </div> 
 
    </div> 
 
    </header> 
 
    <div class="container h100"> 
 
    <div class="row h100"> 
 
     <div class="col-sm-8 gray same"> 
 
     Lorem ipsum dolor sit amet. 
 
     </div> 
 
     <div class="col-sm-4 yellow same"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi consectetur, recusandae sapiente! Beatae facilis cupiditate, a iure officiis alias quibusdam. 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div id="page-buffer"></div> 
 
</div> 
 

 
<footer> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-12"> 
 
     some footer 
 
     </div> 
 
    </div> 
 
    </div> 
 
</footer>

來源

2016-09-08 pankovalxndr

刪除容器類 –

您需要包含所有相關代碼才能直接在問題中複製問題。不只是一個URL codepen – musefan

通常你有一個固定的頭和頁腳固定高度。

在這種情況下我不喜歡這樣在CSS

高度：計算值（100％ -/FotterHeight /像素 -/headerHeight /像素）;

來源

2016-09-08 11:17:51 Dropye

我不知道標題的高度，因爲該網站是自適應和標頭內旋轉木馬圖像 – pankovalxndr

比你可以閱讀與Java腳本的標題高度，然後用此公式設置內容高度 – Dropye

給你的頭的高度，並從整體高度

.yellow { 
    background-color: yellow; 
    height: calc(100vh - 130px); 
} 

.gray { 
    background-color: gray; 
    height: calc(100vh - 130px); 
} 

.blue { 
    background-color: blue; 
    height: 50px; 
}

來源

2016-09-08 11:20:55

謝謝？但是我不知道標題的高度，因爲這個網站是自適應的，頭裏面的輪播圖片 – pankovalxndr

在這裏，您可以用JavaScript做計算頁腳和頁眉。只需在body標籤下面添加即可。但是你必須給標題一個高度並且從總高度減去它;這裏下面的headerHeight沒有定義;

<script> 
var headerHeight = document.getElementById("headerHt"), 
    totalHeight = document.getElementById("page-content"), 
    classGray = document.querySelector(".gray"), 
    classYellow = document.querySelector(".yellow"); 

classGray.style.height = classYellow.style.height = totalHeight.clientHeight - headerHeight.style.height + "px"; 

</script>

來源

2016-09-08 11:45:13 jake

如何在div上設置100％高度？

回答

相關問題