1

If I make the position absolute, it moves up on larger screens and leave a blank space under it.

 <div class="footer">
<footer id="footer">Brought into existence by yours truly</footer>
 </div>

.footer {
background-color: rgb(177, 74, 197);
text-align: center;
font-family: 'Knewave';
color: rgb(114, 245, 190);
width: 100%;
margin-bottom: 0;
bottom: 0;
left: 0;
position: fixed;

 }
S. Gross
  • 51
  • 1
  • 5

2 Answers2

1

You can find more information on w3 schools, summarising from the link absolute positioning bases the items position based on the last ancestor of the item. Fixed places things relative to the viewport.

Orville Bailey
  • 13
  • 1
  • 6
  • Thanks for the link. Although I was still unable to get the footer to always be at the bottom, I was able to use a z-index to get the sticky footer to go under the main content. – S. Gross Jan 08 '19 at 18:21
  • w3 shcools is my goto place for front end development concepts. I'm no front end developer but there are many threads about this topic here. They're usually marked as duplicate. Here's a link to the OG question about [footers at the bottom of the page](https://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) – Orville Bailey Jan 08 '19 at 18:32
0

position:fixed A fixed element is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. As with relative, the top, right, bottom, and left properties are used.

Example - https://jsitor.com/pxO2NVWSq

position:absolute absolute is the trickiest position value. absolute behaves like fixed except relative to the nearest positioned ancestor instead of relative to the viewport. If an absolutely-positioned element has no positioned ancestors, it uses the document body, and still moves along with page scrolling. Remember, a "positioned" element is one whose position is anything except static.

Example - https://jsitor.com/l_A46xcYd

Ashvin777
  • 1,446
  • 13
  • 19