html - 将 div 的高度设置为屏幕高度但随内容扩展

Question

我在一个容器 div 中有一个绝对位置(必需)的 div，它位于绝对位置(必需)，我希望子 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

将 height: 100% 和 width: 100%; 添加到您的 body 标签中，如下所示:

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/