Question

我正在尝试在页面底部设置此横幅广告如何让图片只是将其放在横幅div中的位置，而不是覆盖上面的div。

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

        <div class="banner">
            <img src="http://machahid.info/wp-content/uploads/2016/12/pubmobile.gif" alt="ads">
        </div>

图片描述了问题：

谢谢大家。

Answer 1

简单的解决方案;不要将position: fixed用于必须包含在其父级中的元素。您需要做的是将position: fixed和bottom: 0应用于.banner而不是：

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

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

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

我创造了一个展示这个here的小提琴。

希望这有帮助！

Answer 2

您可以为容器元素（正文或div等）提供140px的填充底部或边距底部，具体取决于您设置文档的方式。这将始终允许广告的页面末尾的空格位于。

之内

Answer 3

您可能希望避免使用# /foos/bars/:id <%= link_to_destoy([:foo, bar]) %> # /foos/:foo_id/bars/:id <%= link_to_destoy([foo, bar]) %>，因为已知它会导致移动设备出现性能问题，尤其是涉及任何类型的转换或翻译时。

在这种情况下，我通常使用绝对的，有时是相对定位的元素，然后动态调整需要适合calc()的周围元素的尺寸。这适用于所有设备，并且不会导致性能损失。 position: fixed也是extremely well supported。

<强> HTML

calc()

<强> CSS

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

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

<强> DEMO

如何在页面末尾设置div

3 个答案: