Question

我们假设我有以下文档结构：

    <div class='container-table'>
      <div class='container-cell'>
        <div class='content'>
         <!-- a lot of text, images, ... -->
        </div>
      </div>
    </div>

这是CSS：

  .container-table {
    position:fixed;
    height:100%;
    width:100%;
    top:0;
    left:0;
    display:table;
  }

  .container-cell {
    display:table-cell;
    vertical-align: middle;
  }

  .content {
    position: relative;
    height:90%;
    width:90%;
    left:50%; 
    margin-left:-45%;
    overflow:scroll;
  }

这个想法是让垂直和水平居中的盒子占据视口高度和宽度的90％。如果content div溢出，它应该只是滚动。

此解决方案在Chrome和Safari中运行良好，但在Firefox中则无效。检查员显示问题：Firefox在出现position:fixed时忽略display:table并通过总结其子项的高度来计算container-table的高度，而Safari / Chrome通过查看高度来计算高度浏览器的视口（因为它应该根据position:fixed）。

这是一个完整的演示：https://jsfiddle.net/76pg43tx/

谁是对的：Firefox或Safari / Chrome或两者兼而有之？有解决方法吗？

Answer 1

使用css可以使用的一个很好的解决方案如下：

    .container-table {
        position:fixed;
        height:100%;
        width:100%;
        top:0;
        left:0;
        display:table;
      }

      .container-cell {
        display:table-cell;
        vertical-align: middle;
      }

      .content {
        position: fixed;
        height:90%;
        width:90%;
        left:50%; 
        margin-left:-45%;
        top: 50%;
        transform: translate(0, -50%);
        overflow:scroll;
      }

检查Fiddle Here.

Answer 2

这是其他css：

* {
box-sizing:border-box;
 }
 .container-table {
    position:fixed;height:100%; width:100%; top:0; left:0;display:table;
}
.container-cell {
        position:relative;
        display:table-cell;
        vertical-align: middle;
        height:100%; top:0px; left:0px;
}
.content {
        position: absolute;
        height:90%; width:90%; top:5%; left:5%;
        overflow-y:scroll;
 }

CLiCK HERE : J S FIDDLE

Answer 3

一个解决方法是使用javascript。

function resizeDiv() {
var vph = $(window).height();
var vpw = $(window).width();
}

一旦有了高度和宽度，就可以根据需要自定义div。

固定位置的容器

3 个答案: