内容垂直对齐时如何固定页脚答案

【问题标题】：how to fixed the footer when content is aligned vertically内容垂直对齐时如何固定页脚
【发布时间】：2017-03-09 09:12:04
【问题描述】：

我有一个非常不典型的网站，其中内容在屏幕中间对齐，我的意思是垂直和水平方向，为了获得这个结果，vertical-align: middle; 用于每个项目和主容器 text-align: center; height: calc(100% - header - footer ))

但是当用户改变大小时

对于窗口页脚也改变了他的位置，但不应该这样做

Js 小提琴 https://jsfiddle.net/hm97o1sa/

没有“flex”有什么方法可以解决吗？

更新：预期行为

滚动到顶部

滚动到底部

【问题讨论】：

您已经以百分比计算了内容高度。但是，单个项目以像素为单位。让这些也变得流畅。
快速解决方法是在中间的内容面板上添加overflow-y: scroll;

标签： css html

【解决方案1】：

一种可能的解决方案是将calc 与视口单元vh 一起使用。

使用calc()，您可以执行计算以确定 CSS 属性值。

使用视口单位，您可以使用视口大小，例如在本例中为 100% 的视口高度 (vh)。

    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
    }
    
    #header {
      height: 100px;
      background: blue;
    }
    
    #content {
      height: calc(100vh - 150px);
      min-height: 250px;
      text-align: center;
    }
    
    #vert-align {
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }
    
    #item_1 {
      background: yellow;
      height: 250px;
      width: 250px;
      display: inline-block;
      vertical-align: middle;
      margin-right: 50px;
    }
    
    #item_2 {
      background: red;
      height: 250px;
      width: 250px;
      display: inline-block;
      vertical-align: middle;
    }
    
    #footer {
      height: 50px;
      background: green;
    }

<div id="header">HEADER</div>
<div id="content">
  <div id="vert-align"></div>
  <div id="item_1"></div>
  <div id="item_2"></div>
</div>
<div id="footer">FOOTER</div>

【讨论】：

【解决方案2】：

修改你的 CSS，你的最终代码将是：

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
#header {
    height: 100px;
    background: blue;
}
#content {
   height: calc(100% - 150px);
   text-align: center;
   overflow-y: auto;
}
#vert-align {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
#item_1 {
    background: yellow;
    height: 250px;
    width: 250px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 50px;
}
#item_2 {
    background: red;
    height: 250px;
    width: 250px;
    display: inline-block;
    vertical-align: middle;
}
#footer {
    height: 50px;
    background: green;
}

<!DOCTYPE html>
<html>
  <head>
    <title>TA</title>
  </head>
  <body>
    <div id="header">HEADER</div>
    <div id="content">
      <div id="vert-align"></div>
      <div id="item_1"></div>
      <div id="item_2"></div>
    </div>
    <div id="footer">FOOTER</div>
  </body>
</html>

【讨论】：

感谢您的帮助 :) 但客户不希望有这样的滚动条 :( 我在想也许我必须用 js 来做
那有什么要求..？？当高度降低时应该是什么反应？
更新了帖子，符合预期的行为

【解决方案3】：

快速解决方法是在您的#content 上应用min-height: 250px

#content {
    height: calc(100% - 150px);
    min-height: 250px;
    text-align: center;
}

【讨论】：