Html 如何在页面末尾设置div

我试图在页面底部设置这个横幅广告，我怎么能让图片在横幅分区中占据它的位置，而不是越过上面的分区

.banner{
宽度：100%；
}
.banner img{
宽度：100%；
最大高度：140像素；
z指数：999999999；
位置：固定；
底部：0；
}

---

简单解决方案；对于必须包含在其父元素中的元素，不要使用

position:fixed

。您需要它做的是将

位置：fixed

和

底部：0

应用到

。横幅

：

.banner {
    width: 100%;
    position: fixed;
    bottom: 0;
}

.banner img {
    width: 100%;
    max-height: 140px;
    z-index: 99999999999;
}

这将使整个横幅固定在底部，图像不会脱离边界：）

我制作了一把小提琴来展示这一点

---

希望这有帮助

根据文档的设置方式，您可以为容器元素（body或div等）指定140px的填充底或边距底。这将始终在页面末尾留出空间，让您的广告位于其中。

您可能希望避免使用

position:fixed

，因为众所周知，它会在移动设备上导致性能问题，特别是在涉及任何类型的转换或翻译时

在这种情况下，我通常的做法是使用绝对定位的元素，或者有时相对定位的元素，然后动态调整需要与之匹配的周围元素的尺寸。这在所有设备上都非常有效，不会造成性能损失<代码>计算（）

HTML

<div class="wrapper">
  <div class="content">
    <h1>Heading!</h1>
    <p>...</p>
    <h1>Another heading!</h1>
    <p>...</p>
    <h1>Yey! Another heading!</h1>
    <p>...</p>
  </div>
  <div class="banner">
    <img src="https://placehold.it/600x120" alt="ads" />
  </div>
</div>

请记住，为了演示，我做了一些假设。您可以自由调整代码以满足您的需要

---

可能是，这可以帮助您。谢谢你的回复。。但我需要它固定滚动它是一个广告。我已经编辑了答案，使横幅固定。这将使整个div固定在屏幕底部，图像占据div宽度的100%——这应该是预期的行为；）

body {
  margin: 0;
}

.wrapper {
  background: #981e32;
  width: 600px;
  height: calc(100vh - 120px); /* viewport height - fixed banner height */
  overflow-y: auto; /* makes sure there are scrollbars when needed */
}

.banner {
  position: absolute;
  bottom: 0;
  max-height: 120px;
}

.content {
  padding: 1em;
  color: white;
}

.banner img {
  display: block; /* this prevents inline elements from messing up height calculations */
}