CSS banner not properly accommodating in page

Question

I'm having a bit of CSS trouble with some banners.

I have two banners (not sticky) at the top and bottom of the page, the top banner works like a charm. I am having issues with the bottom banner.

The banner is not at the bottom of the page; here's what I've tried.

Wrapping my banner <div> in the <footer> tag - that didn't work.
Using position: relative;- now this sets the banner to the bottom of the page - but it doesn't extend the banner through all of the page and puts some kind of margin on the sides.
Setting it manually - but of course, only works for my screen.

Here's my CSS:

div#bannerbtm {
    position: absolute;
    bottom:0%;
    left:0;
  -webkit-animation: gradient 10s linear infinite alternate both;
          animation: gradient 10s linear infinite alternate both; 
  width: 100%; 
}
div#bannertop { 
  position: absolute; 
  top: 0; 
  left: 0;
  -webkit-animation: gradient 10s linear infinite alternate both;
          animation: gradient 10s linear infinite alternate both; 
  width: 100%; 
}

and, here's the relevant HTML:

<body>

<div id="bannertop">
    <div id="banner-content"></div>
</div>

<div> <!-- Page Content --> </div>

<div id="bannerbtm">
    <div id="banner-content"></div>
</div>

</body>

Thanks in advance for any and all input; this has been driving me nuts.

Does this answer your question? [How to make a div 100% height of the browser window](https://stackoverflow.com/questions/1575141/how-to-make-a-div-100-height-of-the-browser-window) — Garrett Motzner, Jun 02 '20 at 20:48

score 1 · Answer 1 · answered Jun 02 '20 at 20:36

1

The problem is that your body and html elements are not actually the full height of the page. The following css will ensure that your body tag is always at least the height of the screen, thereby ensuring that the bottom banner is at the bottom of the screen.

body {
  min-height: 100vh;
}

answered Jun 02 '20 at 20:36

JakeParis

11,056
3
42
65

Thanks; I tried this, but it still placed the bottom banner in the middle of the page. Any other ideas? – Jun 03 '20 at 04:09
@fslowkey-byte Are you sure about that? It works perfectly here: https://codepen.io/jakeparis/pen/VwewyoP?editors=1100 Perhaps you have some other css which is affecting those elements? – JakeParis Jun 03 '20 at 12:41
It didn't work on my site; but adding margin specification to the body solved it. Thank you for the explanation too! – Jun 04 '20 at 18:04

focus.style · Accepted Answer · 2020-06-03T08:53:03.820

0

Add this, so you banner will be absolute inside relative body.

html {
  height: 100%;
}
body {
  min-height: 100%;
  position: relative;
  margin: 0;
  padding: 0;
}

edited Jun 03 '20 at 08:53

answered Jun 02 '20 at 20:37

focus.style

6,612
4
26
38

Thanks; I tried this and it positioned the bottom banner correctly, but wont make the banners extend as wide as the page; it places margins on all 4 sides around it. – Jun 03 '20 at 04:08
1

Updated the answer. Look please. – focus.style Jun 03 '20 at 08:53
This solved it. Apparently the body had a margin around it. Thanks! – Jun 04 '20 at 18:03

CSS banner not properly accommodating in page

2 Answers2