内容垂直对齐时如何修复页脚(how to fixed the footer when content is aligned vertically)

内容垂直对齐时如何修复页脚(how to fixed the footer when content is aligned vertically)

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

但是当用户改变大小时

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

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

有没有办法解决它没有“flex”？

更新：预期的行为

滚动到顶部

滚动到底部

I have a very not typical site where content is aligned by the middle of screen I mean vertically and horizontally, for getting this result used vertical-align: middle; for each item and for the main container text-align: center; height: calc(100% - header - footer ))

but when the user is changing size

for the window the footer is also change his position but should not do it

Js fiddle https://jsfiddle.net/hm97o1sa/

is there any way to fix it without "flex" ?

updated: expected behavior

scrolled to the top

scrolled to the bottom

最满意答案

一种可能的解决方案是将calc与Viewport单位一起使用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> 
  
 
A possible solution would be to use calc together with Viewport units vh.
 
With calc(), you can perform calculations to determine CSS property values.
 
With Viewport units, you can get work with Viewport size, for example in this case 100% of the Viewport height (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>