How to keep footer on window bottom when low content

HTML & CSS
1

Hello, i having issue with footer!
If content is large i need it to be at bottom of page but when content is not big footer need to be at window end!

heres what i got:

Footer CSS:

	@media (min-height: 320px) {
	  .ui.footer.form-page { /* Increased specificity for SO snippet priority */
		position: absolute;
		margin-top: 25px;
		bottom: 0;
		width: 100%;
	  }
	}

Footer:

<div class="ui inverted vertical footer segment form-page" style="background-color: #00aaff !important; height: 20px;">
  <div class="ui container" style="margin-left: 20px; margin-top: -10px;">
    <?=$portalName;?> <?=date('Y');?>
  </div>
</div>

how to fix this?

2

What you are looking for is called a sticky footer and you need to do it like this:

If only modern browsers support is required then use the flexbox version.

Absolutely placing the footer is nonsense in terms of responsive sites and should be avoided at all costs.:slight_smile:

3 Likes
3

@PaulOB I can totally see it works! But to use this i have to change lot of html/css (if i understand it correct) as this is for existing project not new? :frowning:

P.S. i did found something similar before i did post

4

I’m just on my way out but if you show me the structure you have I might be able to offer a suggestion when I get back :slight_smile:

5

@PaulOB basically its semantic ui framework

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
7

@PaulOB Looks like this does what i need! Just sad i hoped to do this by adding few lines at end of each page :frowning: But still this works and will need to add it to all pages! Thanks allot for your time :slight_smile:

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.