强制页脚留在页面底部
[英]Force footer to stay at bottom of page
问题描述
目前，我在视点的底部有一个页脚，但我希望它位于网页的底部。 我喜欢这个，因为它覆盖了每个页面上的大部分内容。 如何更改以下HTML和CSS来解决此问题？
body { background-color: #40E39C; } #nav-menu a { text-align: center; padding: 30px 45px 30px 45px; } #nav-menu ul{ margin-bottom: 100px; text-align: center; } #nav-menu li { display: inline-block; margin-top: 40px; border-style: solid; border-width: 1px; background-color: white; padding: 30px 45px 30px 45px; } .footer { background-color: #EAEDD0; text-align: center; position: fixed; bottom: 0; left: 0; width: 100%; height: auto; } .footer li { display: inline-block; } .footer ul { text-align: center; }
<body> <div id="nav-menu"> <ul> <li><a href="./a.php">A</a></li> <li><a href="./b.php">B</a></li> <li><a href="./c.php">C</a></li> <li><a href="./d.php">D</a></li> <li><a href="./e.php">E</a></li> <li><a href="./f.php">F</a></li> </ul> </div> <footer class="footer"> <ul> <li><a href="./a.php">A | </a></li> <li><a href="./b.php">B | </a></li> <li><a href="./c.php">C | </a></li> <li><a href="./d.php">D | </a></li> <li><a href="./e.php">E | </a></li> <li><a href="./f.php">F</a></li> </ul> </footer> </body>
UPDATE
我删除了CSS
position: fixed;
bottom: 0;
left: 0;
并补充说
display: relative;
到body标签，但页脚底部和页面之间仍有一些空间。
body { background-color: #40E39C; position: relative; } #nav-menu a { text-align: center; padding: 30px 45px 30px 45px; } #nav-menu ul { margin-bottom: 100px; text-align: center; } #nav-menu li { display: inline-block; margin-top: 40px; border-style: solid; border-width: 1px; background-color: white; padding: 30px 45px 30px 45px; } .footer { background-color: #EAEDD0; text-align: center; width: 100%; position: fixed; bottom: 0; } .footer li { display: inline-block; } .footer ul { text-align: center; }
<body> <div id="nav-menu"> <ul> <li><a href="./a.php">A</a></li> <li><a href="./b.php">B</a></li> <li><a href="./c.php">C</a></li> <li><a href="./d.php">D</a></li> <li><a href="./e.php">E</a></li> <li><a href="./f.php">F</a></li> </ul> </div> <p>a<p/> <p>a<p/> <p>a<p/> <p>a<p/> <p>a<p/> <p>a<p/> v <p>a<p/><p>a<p/> <p>a<p/> <p>a<p/> v v v<p>a<p/><p>a<p/><p>a<p/> <footer class="footer"> <ul> <li><a href="./a.php">A | </a></li> <li><a href="./b.php">B | </a></li> <li><a href="./c.php">C | </a></li> <li><a href="./d.php">D | </a></li> <li><a href="./e.php">E | </a></li> <li><a href="./f.php">F</a></li> </ul> </footer> </body>
也许这可能有帮助这是我的画廊页面。 我希望你能用这个更轻松地找到问题。
#nav-menu a { text-align: center; padding: 30px 45px 30px 45px; } #nav-menu ul{ margin-bottom: 100px; text-align: center; } #nav-menu li { display: inline-block; margin-top: 40px; border-style: solid; border-width: 1px; background-color: white; padding: 30px 45px 30px 45px; } .footer { background-color: #EAEDD0; text-align: center; width: 100%; } .footer li { display: inline-block; } .footer ul { text-align: center; margin: 0; }
<body> <head> <link rel="stylesheet" href="styles.css" type="text/css"/> </head> <div id="nav-menu"> <ul> <li><a href="./a.php">A</a></li> <li><a href="./b.php">B</a></li> <li><a href="./c.php">C</a></li> <li><a href="./d.php">D</a></li> <li><a href="./e.php">E</a></li> <li><a href="./f.php">F</a></li> </ul> </div> <div style="clear: both;"> <img src="images/hotelRoom1.jpg" width="360" height="210" style="float:left; padding: 0px 0px 20px 20px;"/> <img src="images/hotelRoom2.jpg" width="360" height="210" style="float:right; padding: 0px 20px 20px 0px"/> </div> <div style="clear: both;"> <img src="images/hotelRoom3.jpg" width="360" height="210" style="float:left; padding: 0px 0px 20px 20px;"/> <img src="images/hotelRoom4.jpg" width="360" height="210" style="float:right; padding: 0px 20px 20px 0px"/> </div> <div style="clear: both;"> <img src="images/hotelRoom5.jpg" width="360" height="210" style="float:left; padding: 0px 0px 20px 20px;"/> <img src="images/hotelRoom6.jpg" width="360" height="210" style="float:right; padding: 0px 20px 20px 0px"/> </div> <footer class="footer"> <ul> <li><a href="./a.php">A | </a></li> <li><a href="./b.php">B | </a></li> <li><a href="./c.php">C | </a></li> <li><a href="./d.php">D | </a></li> <li><a href="./e.php">E | </a></li> <li><a href="./f.php">F</a></li> </ul> </footer> </body>
试图修复的代码片段。
3 个解决方案
解决方案1
3 2018-04-07 16:23:26
添加此CSS：
body {
position: relative;
}
还要在.footer类中添加两个CSS prop。 所以你的.footer CSS会像：
.footer {
background-color: #EAEDD0;
text-align: center;
width: 100%;
position: fixed;
bottom: 0;
}
这是有效的，因为我已经在代码片段中检查了它。
解决方案2
1 2018-04-07 16:07:03
从.footer css中删除以下代码
position: fixed;
bottom: 0;
left: 0;
解决方案3
0 2018-04-07 16:08:49
删除position:fixed从.footer并删除不必要的左，底等。页脚的最终样式是：
.footer {
background-color: #EAEDD0;
text-align: center;
width: 100%;
}
更新clearfix和Unwanted Margin
问题不在于我们的解决方案。 在你的代码中，有另外两个原因阻止你获得预期的结果。 你没有在正确的位置使用clearfix，并且身体上有一些小的边距导致空间。 clearfix的解决方案如下：
div:after{
content: "";
display: table;
clear: both;
}
您应该将这些风格赋予每个有孩子左右浮动的父母。
正如我在寻找的浏览器给出保证金body的解决方法是给：
body{margin: 0}
使用小视口强制页脚停留在页面底部
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.