[英]How do I stick my footer to the bottom when there is less content in my html page
有人可以帮我弄清楚如何将页脚贴在项目页面的底部，因为它贴在其他页面上但不在这个特定的项目页面上，我认为这是因为它没有太多的内容，我已经尝试了互联网上的各种解决方案，但都没有奏效，所以请帮我解决这个问题，我非常感谢我得到的任何帮助。 这是我的项目页面的 html 代码。
html { position: relative; min-height: 100%; background: url(images/background.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } @media only screen and (min-width: 1000px) { header.header-brand { margin: 31px 0; text-align: center; line-height: 38px; padding: 0 20px 0 40px; float: left; } }.social-footer { margin-top: 40px; width: 850px; background-color: #111; color: #f1f1f1; text-align: center; padding: 10px; justify-content: center; align-items: center; /* display: -webkit-flex; */ /* display: -ms-flexbox; */ /* -webkit-align-items: center; -ms-flex-align: center; */ /* -webkit-justify-content: space-between; */ /* -ms-flex-pack: justify; */ }.social-footer.social-footer-icons li { list-style: none; display: inline-block; padding: 0 20px; }.social-footer.social-footer-icons li:last-of-type { margin-right: 0; }.social-footer.social-footer-icons.fa { font-size: 1.3rem; color: #fefefe; }.social-footer.social-footer-icons.fa:hover { color: #4a4a4a; transition: color 0.3s ease-in; }
<head> <meta charset="utf-8"> <title>Projects</title> <meta name="viewport" content="width=device-width, initial scale=1.0"> <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <div class="bg"> <header> <a href="index.html" class="header-brand"><img src="images/default.png" alt="Logo" width="100", height="70"></a> <div class="container"> <nav class="navbar"> <div class="menu"> <div class="line line-1"></div> <div class="line line-2"></div> <div class="line line-3"></div> </div> <ul class="nav-list"> <li class="nav-item"><a href="index.html" class="nav-link">Home</a></li> <li class="nav-item"><a href="about.html" class="nav-link">About Me</a></li> <li class="nav-item"><a href="projects.html" class="nav-link">Projects</a></li> <li class="nav-item"><a href="contact.html" class="nav-link">Contact Me</a></li> <li class="nav-item"><a href="#" class="nav-link">Hire Me</li></a> </ul> </nav> </div> </header> <main> <section class="projects-links"> <div class="wrapper"> <h2>Projects</h2> <a href="GoGrocery.html"> <div class="projects-link"> <p>GoGrocery</p> </div> </a> <a href="TalkBoxPro.html"> <div class="projects-link"> <p>TalkBox-Pro</p> </div> </a> <.-- <a href="Medico.html"><div class="projects-link"><p>Medi Co.</p></div></a> --> </div> </section> <section class="projects-links"> <div class="wrapper"> <h2>Under Construction</h2> <div class="projects-link"> <p>Medi Co:</p> </div> </div> </section> </main> <div class="wrapper"> <footer class="social-footer" id="footer"> <div class="social-footer-icons"> <ul class="menu simple"> <li><a href="https.//www.facebook:com/"><i class="fa fa-facebook" aria-hidden="true"></i></a></li> <li><a href="https.//www.linkedin.com/"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li> </ul> </div> </footer> </div> </body>
Creo que no puede hacerse de una manera directa。 Tendidas que rellenar el espacio aunque sea con código vacío lo cual no es recomendable. Toma en cuenta también que estás usando bootstrap por lo cual tendrias que modificar los estilos de bootstrap para para que también funcione en la representationación del DOM
如果内容很少，如何将页脚始终放在页面底部？
[英]How to stick footer always to the bottom of the page if the content is very less?
如何在IE 6中将浮动页脚粘贴到视口底部？
[英]How do I get a floating footer to stick to the bottom of the viewport in IE 6?
当我在页面底部触摸下拉按钮时，粘性导航栏会抬起我的页脚
[英]Sticky Navbar lifting my footer when i touch the dropdown button when i am at the bottom of my page
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.