如何強制元素以適應內部100vh

Question

我想在引導中創建兩個並排窗格。整個頁面的高度應該爲100vh，頁面沒有滾動條。

但是左側內容標籤中應該有一個滾動條。取而代之的是我沒有考慮到我的h1元素的高度，左邊的內容和整個頁面都有一個滾動條。我怎樣才能做到這一點，唯一的滾動條是在左側內容的框中。對不起，我的糟糕的工作解釋，但如果你訪問小提琴它將是非常明顯的。

的jsfiddle：https://jsfiddle.net/7uauho0d/1/

HTML：

<div id="pg-container"> 


    <h1> 
    TITLE AT TOP 
    </h1> 

    <div class="col-xs-8" id="left"> 
    <h1>LEFT CONTENT</h1> 
    <h1>LEFT CONTENT</h1> 
    <h1>LEFT CONTENT</h1> 
    <h1>LEFT CONTENT</h1> 
    <h1>LEFT CONTENT</h1> 
    <h1>LEFT CONTENT</h1> 
    <h1>LEFT CONTENT</h1> 
    <h1>LEFT CONTENT</h1> 
     <h1>LEFT CONTENT</h1> 
    <h1>LEFT CONTENT</h1> 
    <h1>LEFT CONTENT</h1> 
    </div> 

    <div class="col-xs-4" id="right"> 

    <h1> 
RIGHT CONTENT 
RIGHT CONTENT 
    </h1> 
    </div> 
</div> 

CSS：

#pg-container { 
    height: 100vh; 
} 

#left { 
    overflow-y: scroll; 
    background-color: lightgrey; 
    /* When I specify 100% here, I expect it to take into account the <h1> at the top 
    so that this element is the height of the viewport minus the height of the title at 
    the top. I expect only 1 scrollbar, the one inside left content, there should be no 
    scrollbar for the page*/ 

    height: 100%; 
} 

#right { 
    height: 100%; 
} 

Answer 1

隨着flexbox利用率，有height: 100vh應該工作在父容器上設置overflow: hidden。

檢查此琴：https://jsfiddle.net/7uauho0d/7/

Answer 2

添加overflow-y: hidden到外的div：

#pg-container { 
    height: 100vh; 
    overflow-y: hidden 
} 

如果要禁用水平滾動，以及，你可以只使用overflow: hidden代替。

頂部的標題欄應始終可見。儘管您始終可以通過position: absolute和top: 0執行此操作。