CODEWITHSUNDEEP
htmlcss
Tjoeker
Tjoeker

Reputation: 23

Can't get footer to stick at bottom of page

I've been trying for a couple of hours now, and looked at several topics about it on stackoverflow and elsewhere. But I can't seem to solve it..

    body {
	background-color: #1a3041;
    background-image: radial-gradient(#757580, #1a3041);
	background-repeat: no-repeat;
	background-size: cover;
    }

    html {height:100%}

    .header {
	border-style:solid;
	border-width: 2px;
	border-color: #fa6800;
	background-color: #717171;
	font-family: open sans;
    color: #c1c1c1;
	padding:0px;
	margin:5px;
	margin-top:20px;
	box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
    }

    .header h1{
	display:inline;
	font-size:40px;
	padding-left:10px;
    }

    #slogan {
	display: inline-block;
	font-size:20px;
	font-style:italic;
	float:center;
	line-height: normal;
	vertical-align: center;
	padding-right:10px;
	margin-top:0px;

    }

     #menu {
	display: inline-block;
	font-size:25px;
	font-weight:bold;
	float:right;
	line-height: normal;
	vertical-align: bottom;
	margin-top:10px;

    }

    .main {
	position:absolute;
	background-color:#cdd1d5;
	padding: 10px;
	margin: 25px;
	margin-top:30px;
	margin-bottom: 10px;
	top:70px;
	min-height: calc(100% - 130px - 35px);
	left:0;
	right:0;
	box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.5);
    }

    .footer {
	position: absolute;
	bottom:0px;
	left:5px;
	right:5px;
	height:30px;
	overflow:hidden;
	border-style:solid;
	border-bottom: none;
	border-width: 2px;
	border-color: #fa6800;
	background-color:#333333;
	padding-left:10px;
	vertical-align:top;
	font-size:12px;
	font-family: open sans;
    color: #c1c1c1;
	box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
    }

    a:link{
	text-decoration:none;
    }

    a:link.title, a:visited.title {
	color:#c1c1c1;
    }

    a:link.menu, a:visited.menu, a:link.current, a:visited.current {
	color:#c1c1c1;
	text-decoration:none;
	padding:10px;
    }

    a:link.lastmenu, a:visited.lastmenu, a:link.lastcurrent, a:visited.lastcurrent {
	color:#c1c1c1;
	text-decoration:none;
	padding:10px;
	padding-right:20px;
    }

    a:link:hover.menu{
	background-color:#fa6800;
	padding:10px;
    }

    a:link:hover.lastmenu{
	background-color:#fa6800;
	padding:10px;
	padding-right:20px;
    }

    a:link.current{
	background-color:#333333;
	padding:10px;
    }

    a:link.lastcurrent{
	background-color:#333333;
	padding:10px;
	padding-right:20px;
    }
    <!DOCTYPE html>
    <html lang="en-US">
    <head>
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>The Airline Project | Home</title>
    <link rel="stylesheet" type="text/css" media="screen and (max-width:1250px)" href="mainverysmall.css">
    <link rel="stylesheet" type="text/css" media="screen and (max-width:1500px) and (min-width:1250px)" href="mainsmall.css">
    <link rel="stylesheet" type="text/css" media="screen and (min-width:1500px)" href="main.css">
    </head>
    <body>
    <div class="header">
    <h1><a class="title" href="home.html">The Airline Project</a></h1>
    <span id="slogan">Let your dreams fly</span>
    <span id="menu">
    <a class="menu" href="Home.html">Home</a>
    <a class="current" href="TheGame.html">The Game</a>
    <a class="menu" href="TutandTips.html">Tutorials and Tips</a>
    <a class="menu" href="FAQ.html">FAQ</a>
    <a class="menu" href="http://theairlineproject.net/forum/" target="_blank">Forum</a>
    <a class="lastmenu" href="Aboutus.html">About Us</a>
    </span>
    </div>
    <div class="main">
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    </div>

    <div class="footer">
    <p>footer</p>
    </div>

    </body>
    </html>

So I have two problems: -my footer doesn't stick to the bottom of the page -my 'main' content div doesn't stop before the footer like it should if the window is made too small. (It just continues to the end of the page)

I have read a lot of things that should solve it, but it mostly doesn't work. Setting the footer to relative for example, sticks it right under the menu. Setting the content to relative sticks it to the middle of the page...

Upvotes: 1

Views: 61

Answers (4)

Nav Raj Bhattarai
Nav Raj Bhattarai

Reputation: 410

You can set your footer sticky using postion property by adding sticky value in your css.

body {
	background-color: #1a3041;
    background-image: radial-gradient(#757580, #1a3041);
	background-repeat: no-repeat;
	background-size: cover;
    }

    html {height:100%}

    .header {
	border-style:solid;
	border-width: 2px;
	border-color: #fa6800;
	background-color: #717171;
	font-family: open sans;
    color: #c1c1c1;
	padding:0px;
	margin:5px;
	margin-top:20px;
	box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
    }

    .header h1{
	display:inline;
	font-size:40px;
	padding-left:10px;
    }

    #slogan {
	display: inline-block;
	font-size:20px;
	font-style:italic;
	float:center;
	line-height: normal;
	vertical-align: center;
	padding-right:10px;
	margin-top:0px;

    }

     #menu {
	display: inline-block;
	font-size:25px;
	font-weight:bold;
	float:right;
	line-height: normal;
	vertical-align: bottom;
	margin-top:10px;

    }

    .main {
	background-color:#cdd1d5;
	padding: 10px;
	margin: 25px;
	margin-top:30px;
	margin-bottom: 10px;
	top:70px;
	min-height: calc(100% - 130px - 35px);
	left:0;
	right:0;
	box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.5);
    }

    .footer {
	left:5px;
	right:5px;
	height:30px;
	overflow:hidden;
	border-style:solid;
	border-bottom: none;
	border-width: 2px;
	border-color: #fa6800;
	background-color:#333333;
	padding-left:10px;
	vertical-align:top;
	font-size:12px;
	font-family: open sans;
    color: #c1c1c1;
	box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
  position: sticky;
  bottom: 0;
    }

    a:link{
	text-decoration:none;
    }

    a:link.title, a:visited.title {
	color:#c1c1c1;
    }

    a:link.menu, a:visited.menu, a:link.current, a:visited.current {
	color:#c1c1c1;
	text-decoration:none;
	padding:10px;
    }

    a:link.lastmenu, a:visited.lastmenu, a:link.lastcurrent, a:visited.lastcurrent {
	color:#c1c1c1;
	text-decoration:none;
	padding:10px;
	padding-right:20px;
    }

    a:link:hover.menu{
	background-color:#fa6800;
	padding:10px;
    }

    a:link:hover.lastmenu{
	background-color:#fa6800;
	padding:10px;
	padding-right:20px;
    }

    a:link.current{
	background-color:#333333;
	padding:10px;
    }

    a:link.lastcurrent{
	background-color:#333333;
	padding:10px;
	padding-right:20px;
    }
<!DOCTYPE html>
    <html lang="en-US">
    <head>
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>The Airline Project | Home</title>
    <link rel="stylesheet" type="text/css" media="screen and (max-width:1250px)" href="mainverysmall.css">
    <link rel="stylesheet" type="text/css" media="screen and (max-width:1500px) and (min-width:1250px)" href="mainsmall.css">
    <link rel="stylesheet" type="text/css" media="screen and (min-width:1500px)" href="main.css">
    </head>
    <body>
    <div class="header">
    <h1><a class="title" href="home.html">The Airline Project</a></h1>
    <span id="slogan">Let your dreams fly</span>
    <span id="menu">
    <a class="menu" href="Home.html">Home</a>
    <a class="current" href="TheGame.html">The Game</a>
    <a class="menu" href="TutandTips.html">Tutorials and Tips</a>
    <a class="menu" href="FAQ.html">FAQ</a>
    <a class="menu" href="http://theairlineproject.net/forum/" target="_blank">Forum</a>
    <a class="lastmenu" href="Aboutus.html">About Us</a>
    </span>
    </div>
    <div class="main">
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    </div>

    <div class="footer">
    <p>footer</p>
    </div>

    </body>
    </html>

Upvotes: 0

Nimitt Shah
Nimitt Shah

Reputation: 4587

Just remove Position absolute from the .menu and .footer class style. You will get the desired result. :)

body {
	background-color: #1a3041;
    background-image: radial-gradient(#757580, #1a3041);
	background-repeat: no-repeat;
	background-size: cover;
    }

    html {height:100%}

    .header {
	border-style:solid;
	border-width: 2px;
	border-color: #fa6800;
	background-color: #717171;
	font-family: open sans;
    color: #c1c1c1;
	padding:0px;
	margin:5px;
	margin-top:20px;
	box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
    }

    .header h1{
	display:inline;
	font-size:40px;
	padding-left:10px;
    }

    #slogan {
	display: inline-block;
	font-size:20px;
	font-style:italic;
	float:center;
	line-height: normal;
	vertical-align: center;
	padding-right:10px;
	margin-top:0px;

    }

     #menu {
	display: inline-block;
	font-size:25px;
	font-weight:bold;
	float:right;
	line-height: normal;
	vertical-align: bottom;
	margin-top:10px;

    }

    .main {
	background-color:#cdd1d5;
	padding: 10px;
	margin: 25px;
	margin-top:30px;
	margin-bottom: 10px;
	top:70px;
	min-height: calc(100% - 130px - 35px);
	left:0;
	right:0;
	box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.5);
    }

    .footer {
	left:5px;
	right:5px;
	height:30px;
	overflow:hidden;
	border-style:solid;
	border-bottom: none;
	border-width: 2px;
	border-color: #fa6800;
	background-color:#333333;
	padding-left:10px;
	vertical-align:top;
	font-size:12px;
	font-family: open sans;
    color: #c1c1c1;
	box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
    }

    a:link{
	text-decoration:none;
    }

    a:link.title, a:visited.title {
	color:#c1c1c1;
    }

    a:link.menu, a:visited.menu, a:link.current, a:visited.current {
	color:#c1c1c1;
	text-decoration:none;
	padding:10px;
    }

    a:link.lastmenu, a:visited.lastmenu, a:link.lastcurrent, a:visited.lastcurrent {
	color:#c1c1c1;
	text-decoration:none;
	padding:10px;
	padding-right:20px;
    }

    a:link:hover.menu{
	background-color:#fa6800;
	padding:10px;
    }

    a:link:hover.lastmenu{
	background-color:#fa6800;
	padding:10px;
	padding-right:20px;
    }

    a:link.current{
	background-color:#333333;
	padding:10px;
    }

    a:link.lastcurrent{
	background-color:#333333;
	padding:10px;
	padding-right:20px;
    }
<!DOCTYPE html>
    <html lang="en-US">
    <head>
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>The Airline Project | Home</title>
    <link rel="stylesheet" type="text/css" media="screen and (max-width:1250px)" href="mainverysmall.css">
    <link rel="stylesheet" type="text/css" media="screen and (max-width:1500px) and (min-width:1250px)" href="mainsmall.css">
    <link rel="stylesheet" type="text/css" media="screen and (min-width:1500px)" href="main.css">
    </head>
    <body>
    <div class="header">
    <h1><a class="title" href="home.html">The Airline Project</a></h1>
    <span id="slogan">Let your dreams fly</span>
    <span id="menu">
    <a class="menu" href="Home.html">Home</a>
    <a class="current" href="TheGame.html">The Game</a>
    <a class="menu" href="TutandTips.html">Tutorials and Tips</a>
    <a class="menu" href="FAQ.html">FAQ</a>
    <a class="menu" href="http://theairlineproject.net/forum/" target="_blank">Forum</a>
    <a class="lastmenu" href="Aboutus.html">About Us</a>
    </span>
    </div>
    <div class="main">
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    </div>

    <div class="footer">
    <p>footer</p>
    </div>

    </body>
    </html>

Upvotes: 2

Julian Silvestri
Julian Silvestri

Reputation: 2027

In order to achieve this you need to change your html. You need to place the footer inside of your last div see below.

   <!DOCTYPE html>
    <html lang="en-US">
    <head>
         <meta charset="UTF-8"> 
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>The Airline Project | Home</title>
         <link rel="stylesheet" type="text/css" media="screen and (max-width:1250px)" href="mainverysmall.css">
         <link rel="stylesheet" type="text/css" media="screen and (max-width:1500px) and (min-width:1250px)" href="mainsmall.css">
         <link rel="stylesheet" type="text/css" media="screen and (min-width:1500px)" href="main.css">
    </head>
    <body>
         <div class="header">
              <h1><a class="title" href="home.html">The Airline Project</a></h1>
              <span id="slogan">Let your dreams fly</span>
              <span id="menu">
                   <a class="menu" href="Home.html">Home</a>
                   <a class="current" href="TheGame.html">The Game</a>
                   <a class="menu" href="TutandTips.html">Tutorials and Tips</a>
                   <a class="menu" href="FAQ.html">FAQ</a>
                   <a class="menu" href="http://theairlineproject.net/forum/" target="_blank">Forum</a>
                   <a class="lastmenu" href="Aboutus.html">About Us</a>
              </span>

    </div>
    <div class="main">
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <div class="footer">
             <p>footer</p>
         </div>
    </div>



    </body>

However this still does not work 100% as the formatting needs to be changed. I would recommend looking at a bootstrap. It will make it easier for these types of layouts along with it being already mobile optimized.

Hope this helps

Upvotes: 0

Alec
Alec

Reputation: 966

Under .footer in the css, change position: absolute to position: fixed.

Example: https://jsfiddle.net/6adfc7bs/

Upvotes: 2

Related Questions