英文:
Footer Fixed cant stay centered/justified
问题
Here is the translated content:
所以基本上底部位于页面底部。
但由于我希望页脚始终固定在屏幕底部而不是在所有项目的下方，我必须将其设置为固定位置。这会导致它的定位出现问题。
我必须提到，我已经链接了Bootstrap 5，但与此问题无关。
另一个问题是，对于前端开发，我应该使用这种方法来处理页脚，还是使用框架？像你们现在还使用这种方法吗？
html {
box-sizing: border-box;
overflow: hidden;
min-height: 100vh;
height: 100vh;
}
body {
height: 100%;
width: 95%;
margin: auto;
}
footer {
text-align: center;
color: mediumpurple;
bottom: 5px;
background-color: rgb(215, 212, 212);
}
<body>
<header>
…
</header>
<div class="container" id="collection">
…
</div>
<footer>
<small> Lorem, ipsum dolor... </small>
</footer>
</body>
在这种情况下，页脚位于所有其他项目的下方（position: fixed;），左侧边距保持不变（因为body的左侧边距为2.5%，因为body的宽度为HTML的95%），但在右侧继续增加。
如果不使用固定定位：
如果使用固定定位：
但是，如果将页脚的max-width设置为95%，它将正常工作，并且宽度与body相同，尽管应该比body小。并且无论将宽度设置为50%还是10000%，它始终以正确的左侧边距开始。
英文:
So basically the footer is in the bot of the body.
But since I want the footer to always stick at the bottom of screen instead of below all items, I have to set it as position fixed. And it messes up its positioning.
I have to mention that I have bootstrap5 linked but has nothing to do with the prob.
Another question to frontend dev, should I be using this method for footers or go with frameworks ? Like do you guys even use it nowadays ?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
html {
box-sizing: border-box;
overflow: hidden;
min-height: 100vh;
height: 100vh;
}
body {
height: 100%;
width: 95%;
margin: auto;
}
footer {
text-align: center;
color: mediumpurple;
bottom: 5px;
background-color: rgb(215, 212, 212);
}
<!-- language: lang-html -->
<body>
<header>
…
</header>
<div class="container" id="collection">
…
</div>
<footer>
<small> Lorem, ipsum dolor...</small>
</footer>
</body>
<!-- end snippet -->
In this case the footer is below all other items {position: fixed;} the left side margin stays (cause of the body's left side margin of 2.5% since the body is 95% of html, but on the right side it keeps going.
Without position fixing:
With position fixing:
But if I set the max-width of the footer to 95% it works and It will be the same width as the body, when it should be smaller since it inherits from the body. And it always start with the correct left side margin whether I set width to 50% or 10000%.
答案1
得分: 2
The text you provided is already in English and doesn't require translation.
英文:
Isn't the footer should be outside the body tag? cause if that happens the css that you use on the footer some of them will function but most of them won't. All because the footer tag is inside the body tag in which the first one will be applied on the css is the body tag
footer tag should be outside the body tag
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论