Question

这里我使用table和table-cell来使元素粘到底部，我的屏幕高度为150％，它适用于我的Chrome，但对于Firefox，底部元素粘在100％屏幕的底部，而不是整个屏幕。为了清楚说明，您可以在此处看到jsfiddle：http://jsfiddle.net/zZVJT/这与Chrome相同。

有谁能告诉我如何解决这个问题以及为什么？

这是我的HTML：

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>test</title>
    <link href="test.css" rel="stylesheet">
</head>
<body>
    <div class= 'container border'>
        <div class="container-content border">
            I should be in the middle
            <div class="container-content-bottom border">
               I should be in the bottom
            </div>
        </div>
    </div>
</body>
</html>

和CSS在这里：

    html, body{
    height:100%;
    min-height: 100%;
}
.container{
  display: table;
    height:150%;
    width: 100%;
}

.container-content{
    display: table-cell;
    position: relative;
    vertical-align: middle;
    text-align: center;
}

.container-content-bottom{
    position: absolute;
    bottom: 0;
}

.border{
    border: solid 1px #00f;
}

Answer 1

你不能使用bottom：0;因为那时他站在他永远站立的地方，这就是你的问题。

我没有用过底：0;然后我使用了margin-top，现在他已经完成了。这是我的小提琴。但你不能使用bottom：0;然后按你想要的去做。 http://jsfiddle.net/zZVJT/3/

HTML是相同的：

<body>
    <div class= 'container border'>
        <div class="container-content border">
            I should be in the middle
            <div class="container-content-bottom border">
               I should be in the bottom
            </div>
        </div>
    </div>
</body>

但是css改变了：

html, body{
    height:150%;
    min-height: 100%;
}
.container{
  display: table;
    height:150%;
    width: 100%;
}

.container-content{
    display: table-cell;
    position: relative;
    vertical-align: middle;
    text-align: center;
}

.container-content-bottom{
    position: absolute;
    margin-top:90%;
}

.border{
    border: solid 1px #00f;
}

适用于Firefox和Chrome的不同CSS底部位置

1 个答案: