将页面内容与页脚垂直对齐

Question

Variations or parts of this question have been asked before but I haven't been able to find anything that works for what I'm trying to accomplish.之前已经问过这个问题的变化或部分，但我一直无法找到任何适合我想要完成的事情。 I have a footer at the bottom of the page, even if the page content doesn't take up the entire page, and the footer will be at the end of the scrollable page if the content is bigger than the page.我在页面底部有一个页脚，即使页面内容没有占据整个页面，如果内容大于页面，页脚将位于可滚动页面的末尾。 I also want to vertically align the entire page content to the middle.我还想将整个页面内容垂直对齐到中间。

The problem is that the way I have the footer implemented seemingly makes the way I was vertically aligning impossible.问题是我实现页脚的方式似乎使我无法垂直对齐。 The vertical alignment is using vertical-align with display: table and table-cell Here is my current implementation of the footer.垂直对齐使用vertical-align with display: table和table-cell这是我当前的页脚实现。

<html>
  <body>
    <!-- page content -->
    <footer>
      <!-- footer content -->
    </footer>
  </body>
</html>

html {
  height: 100%;
}

body {
  position: relative;
  min-height: 100%;
  box-sizing: border-box;
  padding-bottom: 50px;
}

footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 50px;
}

I've tried implementing it a few different ways but they all rely on min-height in body .我尝试以几种不同的方式实现它，但它们都依赖于body min-height 。 To vertically align in the middle, it requires taking up the entire height of the content but min-height doesn't allow child elements to use percentage heights.要在中间垂直对齐，它需要占据内容的整个高度，但min-height不允许子元素使用百分比高度。 I saw some suggestions of using height: 1px in body as well but it makes it function like it has height: 100% and so the footer won't properly move if the page content is larger than the page.我看到了一些关于在body中使用height: 1px建议，但它使它的功能就像它具有height: 100% ，因此如果页面内容大于页面，页脚将无法正确移动。

One other suggestion I've seen is using flexbox, however I haven't tried it as I'm trying to support as many browsers as possible.我看到的另一个建议是使用 flexbox，但是我没有尝试过，因为我试图支持尽可能多的浏览器。 Any other suggestions would be appreciated.任何其他建议将不胜感激。

Answer 1

to centre the content of the page this is what you will need;将页面内容居中，这就是您所需要的； HTMl:网页版：

<html>
  <body>
    <div class='page-content'>
    <!-- page content -->
     </div>
    <footer>
      <!-- footer content -->
    </footer>
  </body>
</html>

CSS: CSS：

body {
  min-height: 100%;
  box-sizing: border-box;
  padding-bottom: 50px;
}

.page-content {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
 }

footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  height: 50px;
}

It's the best you can do without flexbox;这是没有 flexbox 时你能做的最好的事情； important to also note that the content will be in the true centre of the page, not the (page height) - (footer height) centre.还需要注意的是，内容将位于页面的真正中心，而不是（页面高度）-（页脚高度）中心。

将页面内容与页脚垂直对齐

问题描述

1 个解决方案

解决方案1
0 2021-07-28 19:02:26

将页面内容与页脚垂直对齐

问题描述

1 个解决方案

解决方案1 0 2021-07-28 19:02:26

解决方案1
0 2021-07-28 19:02:26