Forcing footer to the bottom of the page content

HTML & CSS
#1

I am trying to put my footer at the bottom of my form. I have a number of pages with data input. I designed them so that they would just wrap in the page. I am afraid this will not work well for smartphone users. If I add
tags after each element, the content will be longer then one page. Thus I am looking for a way to move my footer to the bottom of the content. I saw someone with blank space as the opposite problem. No one addressed the follow up question to put the footer under the content.

I found a css solution online. It uses 4 div tags based on a container holding everything and then css to style the div tags. I tried adding it to my site and now I have a yellow header around my menu and the footer

https://talktodock.com/loads/test.php

The HTML I needed to add:

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

the css:

html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer /
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; / Height of the footer */
background:#6cf;
}

IIs there a more simple solution or way to make this work within my existing code?

******************* the header file *********************

<?php
if(!isset($_SESSION['sessionID']))
  {
   session_start();
  }
$dir = basename(getcwd());

$dir = basename(getcwd());
if ($dir !=="loads")
{
  chdir("../");

}
require_once 'database.php';
?>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <base href="https://talktodock.com/loads/">
  <title> Menu </title>
  <link rel = "stylesheet" href="style.css">
  <link r.dygel = "stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="container">
  <div id="header">
  	<header>

    	<ul>
       		<li><a href="login.php">LOGIN</a></li>
       		<li><a href="register.php">REGISTER</a></li>
     	</ul>
   </header>

    
  <div class = "menu-bar">
  	<ul>
  		<li class = "active"><a href="index.php"><i class="fa fa-home"></i>Home</a></li>
  		<li><a href="#"><i class="fa fa-home"></i>Loads</a>
      		<div class="sub-menu-1">
         		 <ul>
            		<li><a href="myload.php"><i class="fa fa-home"></i>Current</a></li>
            		<li><a href="assignload.php"><i class="fa fa-home"></i>Assign</a></li>
            		<li><a href="loadstatus.php"><i class="fa fa-home"></i>Change Status</a></li>
            		<li><a href="attach.php"><i class="fa fa-home"></i>Attachments</a></li>
            		<li><a href="bol.php"><i class="fa fa-home"></i>Upload BOLs</a></li>
            		<li><a href="repower.php"><i class="fa fa-home"></i>Driver Repower</a></li>
            		<li><a href="viewload.php"><i class="fa fa-home"></i>View Multiple</a></li>
            			<li><a href="searchloadid.php"><i class="fa fa-home"></i>Search</a></li>

          		</ul>
      		</div>
      </li>
  	  <li><a href="#"><i class="fa fa-home"></i>Business</a>
    	<div class="sub-menu-1">
        	<ul>
          		<li><a href="openbuslog.php"><i class="fa fa-home"></i>Log</a></li>
          		<li><a href="addbusiness.php"><i class="fa fa-home"></i>Add</a></li>
          		<li><a href="searchbus.php"><i class="fa fa-home"></i>Search Names</a></li>
          		<li><a href="searchbuslog.php"><i class="fa fa-home"></i>Search Logs</a></li>

            	<li><a href="editbus.php"><i class="fa fa-home"></i>Edit</a></li>
            	<li><a href="certifybus.php"><i class="fa fa-home"></i>Completion/Handler</a></li>

        	</ul>
    	</div>
	</li>

	<li><a href="#"><i class="fa fa-user"></i>User</a>
  		<div class="sub-menu-1">
      		<ul>
        		<li><a href="login.php"><i class="fa fa-home"></i>Login</a></li>
          		<li><a href="register.php"><i class="fa fa-home"></i>Register</a></li>
          		<li><a href="user2user.php"><i class="fa fa-home"></i>User 2 User TBP</a></li>
          		<li><a href="mylog.php"><i class="fa fa-home"></i>User Log</a></li>
          		<li><a href="profile.php"><i class="fa fa-home"></i>Modify Profile</a></li>
              <li><a href="changerole.php"><i class="fa fa-home"></i>Toggle Role</a></li>
          		<li><a href="deleteprofile.php"><i class="fa fa-home"></i>Delete Profile</a></li>
          		<li><a href="updateuserpass.php"><i class="fa fa-home"></i>Change Pass</a></li>
              <li><a href="lost.php"><i class="fa fa-home"></i>User/Pass Help</a></li>
              <li><a href="userupload.php"><i class="fa fa-home"></i>New Driver Pic</a></li>
      		</ul>
  		</div>
	</li>
  	<li><a href="#"><i class="fa fa-help"></i>Help</a>
    	<div class="sub-menu-1">
        	<ul>
          		<li><a href="test.php"><i class="fa fa-home"></i>Who Am I</a></li>
          		<li><a href="users/users.htm"><i class="fa fa-home"></i>Test Users</a></li>

        	</ul>
    	</div>
  	</li>
  	<li><a href="#"><i class="fa fa-people"></i>About Us</a>
    	<div class="sub-menu-1">
        	<ul>
          		<li><a href="contact.php"><i class="fa fa-home"></i>Contact Us</a></li>
        	</ul>
    	</div>

  	</li>
 </div>

******************* the footer file *********************

</body>
 <div id="footer">
	<footer>
  		<?php
  			$dir = basename(getcwd());
  			if ($dir !=="loads")
  				{
    				chdir("../");

  				}

    	if(isset($_SESSION['sessionLoadID']))
    		{
      			echo "Your current load is: " . $_SESSION['sessionLoadID'] . " Status: " . $_SESSION['sessionidStatus'];

    		}
    	else
    		{
      			echo "You have no load assigned";
    		}
  		?>
	<p> Copyright 2021 by Michael Macgowan  Become a <a href = "https://www.patreon.com/user?u=54106673&fan_landing=true">Patreon</a> supporter. <a href= "termsofservice.php">Terms and Conditions</a> version 0.555</p>

	</footer>
  </div>
  </div>
</html>

******************* the css file *********************

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
header {
  width: 100%;
  height: 18px;
  background-color: rgb(0,100,0);
  box-shadow: 0 0 10px #000;
  text-align: right;
  text-decoration-color: #000000;
  margin: 0 auto;
}
header a {

  color: #ffffff;

}
  }
  header a:visited{

    color: #ffffff;

}

body {
    margin:0;
    padding:0;
    height:100%;

    background-image: url(background.jpg);
    background-size: cover;
    background-position: center;

    font-family: sans-serif;
    font-Weight: bold;
  }
  table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 2px;
}
  }
  .menu-top {
    text-align: right;
    background-size: cover;
    background-color: rgb(0,100,0);
    height: 12px;

  }

.menu-top li {
      display: inline;
      text-decoration-color: #fff;
    }

.menu-top li a:visited {
  color: #fff;
}

  .menu-bar {
    background: rgb(0,100,0);
    text-align: center;
    }

  .menu-bar ul {
      display: inline-flex;
      list-style: none;
      color: #fff;

    }
  .menu-bar ul li {
      width: 135px;
      margin: 15px;
      padding: 15px;

  }

  .menu-bar ul li a {
      text-decoration: none;
      color: #fff;
}

.active, .menu-bar ul li:hover {
      background: #2bab0d;
      border-radius: 3px;

  }

.menu-bar .fa {
    margin-right: 8px;

}

.sub-menu-1 {
  display: none;
}

.menu-bar ul li:hover .sub-menu-1 {
  display: block;
  position: absolute;
  background: rgb(0,100,0);
  margin-top: 15px;
  margin-left: -15px;
}

.menu-bar ul li:hover .sub-menu-1 ul {
  display: block;
  margin: 10px;
}

.menu-bar ul li:hover .sub-menu-1 ul li {
  width: 150px;
  padding: 10px;
  border-bottom: 1 px dotted #fff;
  background: transparent;
  border-radius: 0;
  text-align: left;
}

.menu-bar ul li:hover .sub-menu-1 ul li:last-child {
  border-bottom: none;
}

.menu-bar ul li:hover .sub-menu-1 ul li a:hover {
  color: #b2ff00;
}

.fa-angle-right {
  float: right;
}

.sub-menu-2 {
  display: none;
}

.hover-me:hover .sub-menu-2 {
  position: absolute;
  display: block;
  margin-top: -40px;
  margin-left: 140px;
  background-color: rgb(0, 100, 0);
}

footer p {
  text-transform: uppercase;

    text-align: center;

}
h1 {
  text-align: center;
  text-transform: uppercase;
  font-size: 48px;
  }
p a {
  color: #666;
}

input {

  height: 30px;
  margin: 20px auto;
  text-align: center;
  box-shadow: 0 0 10px #666;

  background-color: #f2f2f2;

}

textarea {
  width: 240px;
  height: 340px;


}

button {

height: 30px;
  margin: 0 auto;
  text-align: center;
  background-color: #000000;
  color: #ffffff;

}

form {

  text-align: center;


}

#container {
   min-height:100%;
   position:relative;
}
#header {

   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

i have messed with this all afternoon and haven’t got anywhere.

#2

Well, you can use CSS and adjust depending on the viewport size. You can alter every part of the page to fit as you want to. But, it is hard to do if you have not set up your page correctly. There are thousands of tutorials on how to do this on the net. Just google for “mobile first” or “HTML mobile first” or whatever…

But, if you want to save time, you could use a library like Bootstrap. It comes as-is with mobile first designs in it. Might save you some time. But, if you just want to reorder based on viewport size, you can do that in just CSS. Basically, you can set the viewport using META in your header of the page, < head > not the displayed header. Then, in CSS, adjust what is shown based on the viewport size. You can hide items that are not needed on a phone,etc.

But, to start with, set the meta to 1 like this:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Here is the explanation of it: simple viewport explanation
And, there are many things to think about if you need to show your site on both a big screen desktop, or big screen TV or a small phone. Here is a site that discusses a lot of it: Media Tutorial
Hope this helps…

#3

Thanks. I feel like Rip Van Winkle as I haven’t really looked at this stuff in a decade. I hope I can get this site going and then pay for some help.

#4

Well, if you want help, that is why we are here. Free of charge. The thing about creating a site for different viewport sizes can be confusing. There are hundreds of ways to handle a simple foot. Often, you just use CSS to lock it in at the bottom. If the viewport meta does not help, I could drum up a test page for you this weekend. Review that link I posted and try the meta line and let us know if you solve it or not.

#5

I would suggest you look into using CSS flexbox and grids (I personally like using grids).

Here’s a snippet of css:

    .site {
      display: grid;
      grid-template-columns: 48em;
      grid-template-areas:
				"nav"
				"main"
                "sidebar"
				"footer";
      justify-content: center;
    }
    .nav {
      grid-area: nav;
    }

    .sidebar {
      grid-area: sidebar;
      justify-content: center;
      width: 60%;
      margin: 1.250em auto;
    }
// more css...

It really cuts down how much CSS you write and it’s very easy to rearrange the layout, plus you can also do some amazing layouts as well. The real nice thing is you can do it very quickly.

You first would start with mobile (smartphones and usually without media queries) then work yourself up to bigger displays/devices.

/* Approximately the size of an iPad Pro 12.9in 1024px */
@supports (grid-area: auto) {
  @media screen and (min-width: 64em) {
    .site {
      display: grid;
      grid-template-columns:  1fr 42em;
      grid-template-areas:
				"nav nav"
				"sidebar main"
				"footer footer";
      justify-content: center;
      width: 64em;
      margin: 0 auto;
    }
   // More CSS...
#6

I am trying to understand yet I don’t have the time to focus and learn. The meta tag was already in place as I had already bumped into it trying to find a solution. The easiest thing for me would be to figure out the grid system as the only thing to be accessed regularly from the smartphones will be the simple forms. I can just r remove the footer on those pages. Then if the site generates any interest I will hopefully get some support if not from drivers then from shoppers and receivers.

I have been told to look at WordPress for creating a polished look with lots of options for customizing. Even that seems daunting as I have no idea how to merge what I have with a standard template.

Sponsor our Newsletter | Privacy Policy | Terms of Service