Размещение баннера в нижней части веб-сайта, подталкивая все элементы вверх

Question

Я пытаюсь добавить компонент JavaScript, который должен быть добавлен, и работать на разных сайтах. Мой код добавляет прямоугольник внизу сайта, используя div с position: fixed. На некоторых сайтах уже есть элементы в нижней части экрана, которые также используют 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 для вашего нижнего колонтитула . Добавьте 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>