獲取div的高度爲屏幕高度，但隨內容擴展

Question

我有一個位置絕對（必填）的div位置，絕對位置爲absolute（必填），我希望子div是設備的寬度但隨着內容的擴展而延伸。在將此標記爲重複之前，請注意我已查看this和this等多個問題。

我的CSS（SASS）：

.container 
    position: absolute 
    overflow: visible 
    width: 100% 

.page 
    position: absolute 
    overflow: visible 
    width: 100% 
    min-height: 100vh 

我的HTML

<div class="container"> 
    <div class="page"> 
     //content 
    </div> 
</div> 

採用這種設置，頁面DIV不與內容延伸。我究竟做錯了什麼？

Answer 1

我解決它通過增加第三分度的100vh一個最小高度，然後將所有子元素中使用位置去：相對

CSS：

.container 
    position: absolute 
    overflow: visible 
    width: 100% 

.second-container 
    position: relative 
    width: 100% 
    min-height: 100vh 

.page 
    position: absolute 
    overflow: visible 
    width: 100% 
    min-height: 100vh 

HTML：

<div class="container"> 
    <div class="page"> 
     <div class="second-container"> 
      //child elements with position: relative 
     </div> 
    </div> 
</div> 

Answer 2

添加height: 100%和width: 100%;到你的身體標記是這樣的：

html, body { 
    height: 100%; 
    width: 100%; 
} 

然後加入min-height: 100%;到容器是這樣的：

.container { 
    position: absolute; 
    width: 100%; 
    min-height: 100%; 
} 

最後加height: auto;給你的孩子的div像這樣：

.page { 
    position: absolute; 
    width: 100%; 
    height: auto; 
} 

以下是與上述代碼的的jsfiddle：https://jsfiddle.net/AndrewL32/e0d8my79/33/