javascript - 在网站底部放置一个横幅，将所有元素向上推

Question

我正在尝试添加一个 JavaScript 组件，它应该被添加并在各种网站上工作。我的代码使用带有 position:fixed 的 div 在网站底部添加了一个矩形。在某些站点上，屏幕底部已经有一些元素，它们也使用 position:fixed。我想确定这些要素并提出来。这样两个元素都是可见的。另一种选择是将整个网站抬高并将我的 div 放在底部。

有没有人知道如何在 JavaScript/css 配置中做到这一点？

我创建了一个示例代码，它与我在网站底部添加横幅时所做的类似:http://jsfiddle.net/bp0yk7cv/8

var div = document.createElement('div');
div.innerHTML = "my <b>new</b> banner <large>should be placed at the bottom</large>";
// set style
div.style.color = 'red';
div.style.backgroundColor = 'yellow'
div.style.position = 'fixed';
div.style.bottom = '0px';
div.style.height = '30px';
document.body.appendChild(div);

给出了代码站点。添加了 JavaScript 部分，可以操作站点代码。我的要求是让我的新横幅背后的所有元素都升起来。

谢谢，

Answer 1

使用 flexbox 用于您的footer-at-the-bottom 布局。将 display: flex; 和 flex-direction: column; 添加到页脚的父级；添加 margin-top: auto; 到页脚。完成!

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font: 12px/1 Arial, sans-serif;
}

p {
  line-height: 1.5;
}

.text-center {
  text-align: center;
}

.bg-black {
  background: #212121;
}

.bg-black a {
  color: #efefef;
}

.wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

ul.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul.menu.horizontal-menu li {
  display: inline-block;
  font-size: 0;
}

ul.menu.horizontal-menu li a {
  font-size: 12px;
}

ul.menu.vertical-menu li {
  display: block;
}

ul.menu.vertical-menu li a {
  display: block;
  padding: 5px 10px;
}

.header {
  display: flex;
}

.header .branding {
  margin-right: 0;
  height: 52px;
  line-height: 52px;
}

.header nav {
  margin-left: auto;
}

.header nav ul li a {
  height: 52px;
  display: table-cell;
  vertical-align: middle;
}

.content-sideber {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
}

.content-sideber .content {
  width: 75%;
}

.content-sideber .sidebar {
  width: 25%;
}

@media (max-width: 575px) {
  .content-sideber {
    flex-direction: column;
  }
  .content-sideber .content,
  .content-sideber .sidebar {
    width: 100%;
  }
}

.footer {
  margin-top: auto;
  padding: 0 10px;
}

<div class="wrapper">
  <header class="header bg-black">
    <a class="branding" href="#">MyCompany</a>
    <nav>
      <ul class="menu horizontal-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Clients</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </nav>
  </header>
  <main class="content-sideber">
    <section class="content">
      <h2>Heading 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem quia repellat dolor natus, non tempora hic, itaque, officiis iste nemo, eligendi facere impedit commodi pariatur. At accusantium ducimus aspernatur quisquam!</p>
      <p>Voluptates nobis, error illo id ab similique qui quibusdam minima doloremque excepturi facere fugiat nisi amet accusantium. Porro nesciunt totam nobis, cupiditate voluptas veritatis, sit temporibus fugit sapiente at quasi.</p>
    </section>
    <aside class="sidebar">
      <ul class="menu vertical-menu">
        <li><a href="#">Lorem ipsum dolor sit</a></li>
        <li><a href="#">Consectetur adipisicing</a></li>
        <li><a href="#">Atque excepturi corporis</a></li>
        <li><a href="#">Officiis magnam</a></li>
      </ul>
    </aside>
  </main>
  <footer class="footer text-center">
    <img src="https://picsum.photos/700/50/?gravity=south" alt="">
  </footer>
</div>