Question

我有一个非常不典型的网站，其中内容在屏幕中间对齐，我的意思是纵向和横向，以便为每个项目和主容器使用vertical-align: middle; text-align: center; height: calc(100% - header - footer ))

但是当用户改变大小时

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

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

有没有办法在没有“flex”的情况下修复它？

更新：预期的行为

滚动到顶部

滚动到底部

Answer 1

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

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

使用视口单元，您可以使用视口大小，例如在这种情况下100％的视口高度（vh）。

＆＃13;

    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;
    }

＆＃13;

<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>

＆＃13;

Answer 2

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

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 3

快速解决方法是在min-height: 250px

上应用#content

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

内容垂直对齐时如何修复页脚

3 个答案: