0

Sometimes on my site, that have few lines of text or very less content.

In such cases, the footer displays below the content somewhere between the page. That does not give a nice look to the page.

Like this:

enter image description here

When I add a css:

.ar-footer{
   position:absolute;
   bottom:0px;
   left:0px;
   right:0px;
   width:100%;
 }

The footer content is changed. Like this: enter image description here

how to fix it? I want to fix the footer section into bottom of the pages if the content is less or more.

  • 2
    Here are some methods: https://css-tricks.com/couple-takes-sticky-footer/ – Tom Mar 21 '19 at 03:50
  • https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_fixed_footer – Ibra Mar 21 '19 at 04:01
  • 1
    @Sabbir would you like to explain why the options listed aren't helpful? With 5 different options surely you can find something. Or help us understand what special element is missing to provide a better answer. – Bryce Howitson Mar 21 '19 at 04:01
  • Because I tried of this already its only shows to add height on footer. Actually its not working on my problems. @BryceHowitson –  Mar 21 '19 at 04:22
  • Can you please see my question I already tried with `position: absolute; bottom: 0;` And I show the errors. @BryceHowitson –  Mar 21 '19 at 04:45
  • @Sabbir, The first comment from @Sushil gives you 5 options. None of them use `absolute` positioning and each achieves your desired goal. I'd suggest working your way through that or looking through the ~2400 other SO questions about [sticky footers](https://stackoverflow.com/search?q=css+sticky+footer) – Bryce Howitson Mar 21 '19 at 04:52
  • See the CSS Tricks Flex-box example from Sushil's link, it's the least hacky approach and better supported than grid. Apply the same rules as the example to your outermost wrapping containers for your content, body and footer. If it doesn't work it's because there's some conflicting css overriding it somewhere, troubleshoot that. – Jasmine Mar 21 '19 at 05:32

2 Answers2

0

If you have a CSS for main content add

#maincontent{
flex-grow: 1;
}

If not you could try add it to the body tag [Not sure if this works tho]

body{
flex-grow: 1;
}

This will force your content to take up the full display and your footer should stick to the bottom

Paul
  • 76
  • 5
0

Structure your basic HTML-Markup like this:

<body>
  <header></header>
  <div id="wrap"></div>
  <footer></footer>
</body>

Then in your css add

#wrap {
  min-height: 100%;
}

Super simple and works across all browsers. Add all your other markup inside the #wrap. If it helps you can also put the header inside the wrap. Just make sure wrap is before the footer.

Joscha
  • 240
  • 1
  • 11