stackoom
  简体   繁体   中英

Can't get footer to stick at bottom of page

 原文  2018-09-11 18:13:10  5   4    html/ css

Question

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...

4 answers

solution1
 2  2018-09-11 18:18:22

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

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

solution2
 2 ACCPTED  2018-09-11 18:30:00

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>

solution3
 0  2018-09-11 18:26:15

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

solution4
 0  2018-09-11 18:46:46

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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Can't make footer stick to the bottom of the page Can't get my footer to stick to the bottom Can't get a footer to stick to the bottom when content of the page is being dynamically rendered Footer div won't stick to bottom of the page Bootstrap footer doesn't stick to the bottom of the page cannot get footer to stick to bottom of page Stick the footer to the bottom of the page stick footer at the bottom of the page footer not stick to bottom of the page Getting a footer to stick to the bottom of the page
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM