Ghast Ghast - 3 months ago 5
CSS Question

Fix footer to bottom of page (no header)

I'm still learning CSS and I'm not too good yet at all, if you are able to find a fix for this could you provide an example for where I am to put the new CSS or removed. I've tried at least 30 different things now and couldn't find the one that works.

I have text centered in my screen no header but I want to force a second text to the bottom below that.

Here's a picture to help represent my setup:
enter image description here

This is some of the code I got to center the text (I want to keep it as unaffected as possible so both the centered text and footer work just fine)

<div class="centered">
<h1>Main text</h1>
</div>
<h3 class="footer">Sub text</h3>


Here's the CSS I got going:

.centered {
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.footer {
position:fixed;
bottom:0;
clear:both;
height:75px;
}


Like I said the centered text works fine even when I adjust the page it still stays center, I just want to have a footer below that that will stay fixed to the bottom. Thank you for any that help much appreciated~

Answer

You have already done it!

.footer {
    position: fixed;
    bottom: 0;
    clear: both;
    height: 75px;
    left: 0;
    right: 0;
    text-align: center;
    margin: 0;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.footer {
  position: fixed;
  bottom: 0;
  clear: both;
  height: 75px;
  left: 0;
  right: 0;
  text-align: center;
  margin: 0;
}
<div class="centered">
  <h1>Main text</h1>
</div>
<h3 class="footer">Sub text</h3>