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

问题描述 投票：-3回答：1

我想实现以下效果：

enter image description here

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

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

但它会覆盖内盒（图中的绿色部分），所以如何使黄色部分在绿色部分下面。绿色部分的高度不固定。

javascript html css
1个回答
3
投票

添加位置：relative + 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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.