Question

我要实现以下效果：

我尝试设置页脚部分（图片中的黄色部分）：

<style>
        .main {
            background-color: blue;
            padding: 0 20px;
        }
        .list-container {
            background-color: green;
        }
        .footer {
            height: 80px;
            background-color: yellow;
            margin-top: -30px;
        }
    </style>
    <body>
        <div class="container">
            <div class="main">
                <div class="list-container">
                    <div>item1</div>
                    <div>item2</div>
                    ....... more items
                </div>
            </div>
            <div class="footer"></div>
        </div>
    </body>

但是它将覆盖内部框（图片中的绿色部分），因此如何使黄色部分位于绿色部分之下。绿色部分的高度不固定。

Answer 1

在列表容器中添加位置：相对+ z-index：1

.main {
  background-color: blue;
  padding: 0 20px;
}

.list-container {
  background-color: green;
  z-index: 1;
  position: relative;
}

.footer {
  height: 80px;
  background-color: yellow;
  margin-top: -30px;
}

<div class="container">
  <div class="main">
    <div class="list-container">
      <div>item1</div>
      <div>item2</div>
      <div>item3</div>
      <div>item4</div>
      <div>item5</div>
      <div>item6</div>
      ....... more items
    </div>
  </div>
  <div class="footer"></div>
</div>

容器的设置背景取决于内盒的高度

1 个答案: