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 用于您的底部页脚布局。将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>

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

1 个答案: