0

我有一个带有以下 HTML 和 CSS 代码的页脚,当我以我的分辨率 (1366x768) 查看页面时,一切看起来都很好。但是当使用更高分辨率的设备 (1920x1080) 时,页脚不会固定在底部,而是在底部上方(靠近页面中间)。我使用了 Chrome Zoom,页脚似乎与页面中的所有元素一起移动。

.footer {
  font-size: calc(16px - 2px);
  line-height: 1.1;
  color: #999;
  margin-bottom: 5px;
  text-align: center;
	background-color: #fff;
	padding: calc(8px * 1.5) 0;
}
</div> <!--/.container-->
<footer class="footer container">
  <div class="container-inner">
    <p> <a href="http://example.org" target="_blank">Name, Inc.</a> Copyright ©2020 </p>
  </div>
</footer>

有没有办法让页脚出现在底部(在所有分辨率上)并且不与其他元素一起移动?感觉很松

4

3 回答 3

1

使用 flexbox,我们可以通过将内容、页脚和可选的页眉包装在 flex 容器中来轻松地将页脚保持在底部,flex-direction: column;同时min-height: 100vh将内容设置为flex-grow: 1. 的默认值flex-grow0,所以我们没有对页脚做任何事情(尽管我确实用 将其居中align-self: center)。

我还添加了一个切换来显示增加的内容视图,以证明页脚将与内容一起流动,而当内容本身不填充#content.

#container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer {
  align-self: center;
}

#content {
  flex-grow: 1;
  padding: 1rem;
  border-bottom: 1px solid grey;
}

.to-bottom {
  margin-top: 110vh;
}
<div id="container">
  <div id="content">
    <label for="toggle-height">Force Scroll: </label><input id="toggle-height" type="checkbox" onclick="document.querySelector('p:nth-of-type(2)').classList.toggle('to-bottom')"/>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius, corporis! Sunt ducimus impedit, dolor id ipsa aliquid in necessitatibus labore! Iste laboriosam eos eligendi vel repellendus, blanditiis accusamus vitae ipsam!</p>
    
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius, corporis! Sunt ducimus impedit, dolor id ipsa aliquid in necessitatibus labore! Iste laboriosam eos eligendi vel repellendus, blanditiis accusamus vitae ipsam!</p>
  </div>
  <footer>&copy; My Site</footer>
</div>

于 2020-02-26T18:02:32.843 回答
0

尝试这个:

html, body {margin:0; padding:0}

.footer {
  font-size: calc(16px - 2px);
  line-height: 1.1;
  color: #999;
  margin-bottom: 5px;
  text-align: center;
  background-color: #ccc;
  padding: 0;
  bottom: 0;
  position: absolute;
  width: 100%;
}
<footer class="footer container">
  <div class="container-inner">
    <p> <a href="http://example.org" target="_blank">Name, Inc.</a> Copyright ©2020 </p>
  </div>
</footer>

参考:https ://www.w3schools.com/cssref/pr_pos_bottom.asp

于 2020-02-26T17:34:17.973 回答
0

只需给页脚之前的内容元素一个计算的最小高度(考虑所有元素的固定高度)。如果您发布完整的 html 代码,它会更容易帮助您...

[编辑] 示例代码 -> 假设页眉高度为 80 像素(不包含在 div.content 中)和页脚高度为 100 像素,您可以为容器提供等于视口高度 (vh) 减去的最小高度180 像素(页眉 80 像素 + 页脚 100 像素):

.header
{
  height:80px;
}

.footer
{
  height:100px;
}

.container
{
  min-height:calc(100vh - 180px); 
}

对于看起来像这样的 html 页面代码:

<div class="header"></div>
<div class="container"></div>
<div class="footer"></div>

如果您想保留没有固定高度的页眉和页脚,而不仅仅是使用 flex-box(这需要一个包装器元素,它也可以是 ):

.flex-wrapper
{
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header
{
  // whatever
}

.footer
{
  // whatever
}

.container
{
  flex:1; 
}

这将适用于这个 html 结构:

<div class="flex-wrapper">
  <div class="header"></div>
  <div class="container"></div>
  <div class="footer"></div>
</div>
于 2020-02-26T17:07:58.543 回答