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%;添加到您的正文标记中，如下所示：

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/

Answer 2

我通过添加第三个div来解决它，最小高度为100vh，然后所有子元素都在使用位置：relative

的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>

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

2 个答案: