Placing a banner at the bottom of a web site pushing all elements up

Question

I'm trying to add a JavaScript component that should be added and work on various sites. My code adds a rectangle at the bottom of the site using a div with position:fixed. On some sites, there are already some elements at the bottom of the screen, which also use position:fixed. I would like to identify those elements and raise them up. So that both elements will be visible. Another alternative would be to raise the whole site up and place my div at the bottom.

Does anyone have an idea, how this can be done in JavaScript/css configuration?

I've created a sample code which is similar to what I do to add the banner at the bottom of the site: 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);

The code site is given. The JavaScript part is added and can manipulate the site code. My requirement is to make all the elements behind my new banner raise up.

Thanks,

Answer 1

Use flexbox for your footer-at-the-bottom layout. Add display: flex; and flex-direction: column; to the footer's parent; add margin-top: auto; to the footer. Done!

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