Ghast Ghast - 9 months ago 38
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>