将页脚固定到底部，向右移动
Posted
技术标签:
【中文标题】将页脚固定到底部，向右移动【英文标题】：Fix footer sticked to the bottom shifted to the right 【发布时间】：2021-11-08 03:53:26 【问题描述】：我正在尝试创建一个底部有页脚的 html 页面，与浏览器窗口的大小无关。我创建了以下 HTML 文件：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Home </title>
<link rel="stylesheet" href="./assets/css/styles.css">
</head>
<body>
<h1> Home </h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
<footer id="footer">
Foo Bar Baz
</footer>
</body>
</html>
我的样式表是：
#footer
position: absolute;
bottom: 0px;
width: 100%;
padding: 10px;
border: 1px solid;
我按照几个指南使用了属性position 和bottom。
我将页脚置于预期的垂直位置，但无论窗口宽度如何，它都会水平向右移动。例如：full screen、medium、small。
错误在哪里？我该如何解决？
【问题讨论】：
页脚垂直在底部的问题在哪里 @Philo 是的，垂直方向是我需要它的位置，但水平方向左侧有一个不需要的边距，页脚大于窗口（因为滚动条可以看到）。 “错误在哪里？” - 100% 宽度加上每边 10px 的内边距，导致 超过 100%。 “我该如何解决它？” - 阅读 box 模型 的基础知识，发现box-sizing 属性。 （虽然在这种特殊情况下，我会完全省略width，而是指定left 和right。）
@CBroe 哎哟！如此明显...非常感谢您（此处为 HTML 菜鸟）！如果你用这个写一个答案，我会很高兴接受它。
【参考方案1】：
根据您的要求，如果您不想显示页脚的right 和left 边框，那么您只能将left:0px; 与您的页脚CSS 一起使用。
即
#footer
position: fixed;
bottom: 0px;
width: 100%;
padding: 10px;
border: 1px solid;
left: 0px;
如果你想显示right 和left 的页脚边框，则减少footer 的width 并相应地增加left 的值。希望对您有所帮助。
【讨论】：
谢谢。这样就解决了一半的问题：左边的空白没有了，但是页脚还是比窗口大。 您可以简单地减少width，例如98%，正如我在回答中提到的那样。【参考方案2】：
如果你在法线之外使用位置属性（例如绝对或固定），你必须在垂直轴上同时在水平轴上给出你给的属性。宽度值可能不起作用，因为您不再处于正常流程中。 因此，像这样使用它会得到正确的结果。
#footer
position: fixed;
bottom: 0px;
width: 100%;
padding: 10px;
border: 1px solid;
left: 0px;
【讨论】：
【参考方案3】：要回答您的问题，请查看此问题。 How to get rid of white space on left and right of div?
您必须重置 CSS。您可以通过将以下内容添加到您的代码中来做到这一点。
html,
body
margin: 0;
padding: 0;
width: 100%;
height: 100%;
【讨论】：
感谢您的建议。它删除了左侧不需要的空间，但奇怪的是在页脚下方添加了空间，基本上将问题移到另一个轴上。以上是关于将页脚固定到底部，向右移动的主要内容，如果未能解决你的问题，请参考以下文章