How to keep footer on window bottom when low content

HTML & CSS
6

I’d still need to see your page structure as I assume each theme is different from the next.

To do what you want for modern browsers only the simplest way with minimum code and effort is to set the page up like this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
html,body{margin:0;padding:0}
.sticky-wrap{
	display:flex;
	flex-direction:column;
	min-height:100vh
}
.sticky-footer{margin-top:auto}

</style>
</head>

<body>
<div class="sticky-wrap">
  <div class="sticky-content">
    <h1>Original content goes here</h1>
  </div>
  <div class="sticky-footer">
    <div class="ui inverted vertical footer segment form-page" style="background-color: #00aaff;">
      <div class="ui container">
        Footer stuff
      </div>
    </div>
  </div>
</div>
</body>
</html>

That means you just need to stick the footer code inside the sticky-footer div and the rest of the layout inside the sticky-content div. It may be that you could massage your existing structure if it was similar but its best to use the structure I have shown.

Any other method (apart from the display:table method I have shown) is going to be too rigid for a responsive design as you cannot set a footer to 20px height and then allow the text to wrap or be zoomed or spread vertically in smaller viewports etc.

1 Like