在網站底部放置橫幅，將所有元素向上推

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>