0

我正在尝试将一个 div 放在另一个 div 中，该 div 延伸到屏幕的整个高度并将其垂直居中，如下所示：

预览 http://f.cl.ly/items/1a3L46453f0D271V1O2w/Schermafbeelding%202013-04-02%20om%2021.37.25.png

大图是全屏div，白条是垂直居中的div。下面的解决方案在我尝试过的所有可能的计算机和浏览器上都能正常工作……除了 Mobile Safari。出于某种原因，Mobile Safari（至少在 iPad 上）决定将嵌套 div 放在页面下方 50% 而不是其父 div 下方 50%。

HTML：

<div class="band full">
    <div class="band">
        *content*
    </div>
</div>

SCSS（删除了不相关的标签）：

div.band{ //General styling for div.band elements
    margin: 0px;
    padding: 80px 0px;
    width: 100%;

    &.full{ //Style the parent div
        height: 100%;
    }

    div.band{ //Style the nested div
        position: relative;
        top: 50%;
        margin-top: -200px;
        padding: 20px 0px;
        height: 400px;
    }
}

我有一种唠叨的感觉，这是 Mobile Safari 中的一个错误。我当然希望不是。有谁知道如何解决这一问题？

4

2 回答 2

0

看一下这个。未在移动设备上测试，但应该可以工作

HTML

<div class="panel">
 <div class="panelInner">
  <div class="box">
   <div class="boxInner">hi there</div>
  </div>
 </div>
</div>

CSS

html {
min-height: 100%;
height: 100%;
}

body {
height: 100%;
margin: 0;
}

.panelInner {
padding: 40px;
text-align: center;
display: table-cell;
vertical-align: middle;
}

.box {
height: 200px;
background: #999;
display: table;
width: 100%;
}

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

这是一个小提琴

于 2013-04-03T00:08:12.903 回答
0

我确实尽了最大努力以干净的方式解决了这个问题，但是我进行了更多测试，这显然是 Mobile Safari 渲染引擎中的一个错误。我决定用一个公认的肮脏的 jQuery hack 来解决它，但至少它现在可以工作了。

我的页面有一张这样的全屏照片，顶部中间有一条带，页面底部有另一张。最上面的问题很容易解决：只需使用绝对定位而不是相对定位（无论如何都是相对于页面顶部的定位）。另一方面，底部带的“顶部”属性必须在将其定位设置为绝对位置后根据页面的高度重新计算。我通过将“top”属性设置为此解决了这个问题：从页面顶部到底部带的垂直偏移量+（全屏带的高度以/2为中心）。

或以代码形式：

$(window).load(function() { //Wait until the page is fully loaded
    if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) { //If the user is using an iDevice
        $('div.band#top div.band').css('position', 'absolute');
        $('div.band#bottom div.band').css('position', 'absolute');
        $('div.band#bottom div.band').css('top', $('div.band#bottom').offset().top + ($('div.band#bottom').height() / 2));
    }
});
于 2013-04-04T21:28:09.567 回答