CODEWITHSUNDEEP
htmlcss
user13545492
user13545492

Reputation:

CSS banner not properly accommodating in page

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.

  1. Wrapping my banner <div> in the <footer> tag - that didn't work.
  2. 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.
  3. 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.

Upvotes: 1

Views: 120

Answers (2)

focus.style
focus.style

Reputation: 6760

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

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

Upvotes: 0

JakeParis
JakeParis

Reputation: 11210

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;
}

Upvotes: 1

Related Questions