Question

我尝试在截面中间设置几个元素的div，其高度设置为屏幕高度的100％。问题是我使用的解决方案不适用于谷歌Chrome以外的其他浏览器。我使用position：absolute，display：table，margin和top：0，bottom：0;

span

var section = document.querySelectorAll('section');
  var winh = window.innerHeight;
  header.style.height = winh+'px';
  for (var i = 0; i <= section.length; i++) {
    section[i].style.height = winh+'px';
  }

section {
    padding:100px 0;
    position:relative;
    background:#222;
}                                             
section div {
    width:90%;
    max-width:1200px;
    margin:0 auto;
    text-align:center;
    position:absolute;
    left:0;right:0;top:0;bottom:0;
    display:table; 
}

在Chrome上看起来很完美，而在其他浏览器上则不然。我用JavaScript声明的部分高度。

DEMO（在多个浏览器中查看）： http://wbm-blog.esy.es/projects/timeline/

Answer 1

我通过设置高度，删除显示表和设置margin：auto 0来修复它。当以技巧顶部为中心时需要高度：0;底部：0; margin-top：auto; margin-bottom：auto;

＆＃13;

x[t]

＆＃13;

section {
    padding:100px 0;
    position:relative;
}                                             
section > div {
    width:90%;
    max-width:1200px;
    margin: auto 0;
    height: 40px;
    text-align:center;
    position:absolute;
    left:0;right:0;top:0;bottom:0;
}

＆＃13;

垂直居中位置：绝对仅适用于chrome

1 个答案: