2

I'm building my own website for a project. I have an event page where I show all upcoming events. Every time you add an event, the page will get bigger. ATM, the footer is in the middle of the page because there are not enough events.

The problem is, I want the footer to be on the bottom of the screen, unless the page is bigger than the screen. If the page is bigger than the screen, the footer should be on the bottom of the page.

I tried to use height: 100% or height: 100vh but they put the height on "fit to screen", so if there are for example 20 events (bigger than the screen), the footer will be stuck on the bottom of the screen and the events will go through the footer.

The page now looks like this:

enter image description here

and the table is build up like this:

<table class="events-table" >
    <thead>
        <tr>
      <th class="event-time" scope="col">Date/Time</th>
      <th class="event-description" scope="col">Event</th>
    </tr>
   </thead>
    <tbody>
      <tr>
        <td>
            #_EVENTDATES    
            #_EVENTTIMES
        </td>
        <td>
            #_EVENTLINK
            {has_location}<br/><i>#_LOCATIONNAME, #_LOCATIONTOWN #_LOCATIONSTATE</i>{/has_location}
        </td>
      </tr>
    </tbody>
</table>
Amir Shabani
  • 3,857
  • 6
  • 30
  • 67
YarneDS
  • 23
  • 3

3 Answers3

3

Have a look at this: https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c

Summary:

  • use a page-container around everything on the page
    • set its minimum height to 100% of the viewport height (vh). As it is relative, its child elements can be set with absolute position based on it later.
  • content-wrap has a bottom padding that is the height of the footer, ensuring that exactly enough space is left for the footer inside the container they are both in.
  • wrapping div is used here that would contain all other page content.
  • set footer to absolute, sticking to the bottom: 0 of the page-container it is within.

HTML: 

 <body> 
       <div id="page-container">   
            <div id="content-wrap">    
                  <!-- all other page content -->        
            </div>   
            <footer id="footer"></footer> 
       </div>
 </body>

CSS: 

 #page-container {  position: relative;  min-height: 100vh;}

 #content-wrap {  padding-bottom: 2.5rem;    /* Footer height */}

 #footer {  position: absolute;  bottom: 0;  width: 100%;  height: 2.5rem;            /* Footer height */}
Alfie Danger
  • 377
  • 5
  • 23
0

You can use PHP to get your footer on any page, look at this : https://www.w3schools.com/php/php_includes.asp Or you can use a framework like angular

Joan
  • 25
  • 2
  • 9
-1

There are a few different ways to do what you want, depending on exactly what you want. Some sites like to have a footer that's at the bottom of what's visible (although less do that these days), while others (most) have it rooted to the bottom of the entire page so you have to scroll to it, while also ensuring it doesn't sit halfway up the visible window when the page is too small.

You probably want the latter.

There's a decent guide for it here: https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/

There are also several others across the web, including this one from W3C:

https://www.w3schools.com/howto/howto_css_fixed_footer.asp

If you really want consistency, you can try throwing a little php magic in there as well. Nothing impresses in a web-dev project like a little php!

Hope I've helped.

CasualViking
  • 262
  • 1
  • 9