Question

我有html, body {height: 100%;}的东西（除其他外）做div {position: relative; top: 80%}。现在我想要在页面的下边缘之前div后面填充/边距/空格。

我提出的最简单的事情div {margin-bottom: 3em;}适用于Chrome，但不适用于Firefox（据我所知，保证金从身体结束处开始，在＆＃34; 100％＆＃34;，它高于div的底边）。小提琴：http://jsfiddle.net/xvrhmLsv/3/

解决方法可能是＆＃34;媒体查询高度级联＆＃34;，但我非常想避免这种情况;加上我记得不止一次遇到这种行为......想法？

Answer 1

如何使用边框来获得您想要的效果？ e.g。

div {
border-bottom: 3em solid white;
}

Answer 2

以下是从你的小提琴中取出的CSS：

html,
body {
    height: 100%;
}
body {
    padding-bottom: 3em; /*does not work*/
}
div {
    background: red;
    height:100%;
    position: relative;
    top: 80%;
    margin-bottom: 3em; /*does not work in Firefox, works in Chrome*/
}

和html是：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
</head>
<body>
    (scroll down)
    <div></div>
</body>
</html>

实际上，padding-bottom和margin-bottom都适用于Chrome和Firefox。

元素html和body的高度定义为100%，因此它们的高度受窗口高度的限制。元素<div>的{{1}}属性设置为top。 div溢出身体，因此，您在身体上设置的填充底部被80%隐藏。

差异来自div上设置的margin-bottom。两个浏览器都考虑了这个边距，但是Chrome向下滚动元素，包括他的底部边距，而Firefox向下滚动到元素框的底部偏移。

我updated the fiddle在div上有一些不透明度，并且在元素上有边框。

编辑：由于div的使用，Firefox似乎没有向下滚动到溢出div的margin-bottom。如果我放top而不是top: 80%;，则会在滚动条件中考虑margin-top: 80%;。见fiddle。在最后一个小提琴中，我所做的唯一更改是将margin-bottom替换为top。

html，身高100％和身体的填充底部在Firefox中不起作用

2 个答案: