获取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/