javascript - Firefox 中的 body 最大高度

Question

我对 Firefox 中的最大高度有疑问。

我构建了一个简短的代码示例来说明问题。请在 Chrome 和 Firefox 中打开此示例。 Firefox 中的行为与 chrome 中的行为不同。

$(function() {

	setTimeout(function() {
		$('body').css("max-height", $('body').height() - 100);
	}, 250);

});

body{
    margin: 0;
    padding: 0;
    background-color: red;
}

#background-gradient{
    position: relative;
    top: 0;
    width: 100%;
    height: 100px;
    background-color: blue;
    z-index: 1;
}

#page-wrapper{
    background-color: green;
    margin: 0 auto;
    width: 600px;
    position: relative;
    top: -100px;
    z-index: 2;
}

p{
    margin-top: 0;
}

p:last-child{
    margin-bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="background-gradient"></div>
<div id="page-wrapper">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor facilisis ligula vestibulum fermentum. Curabitur quis imperdiet diam, quis semper velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum sollicitudin accumsan felis, eu lacinia sapien rutrum at. Quisque vel neque non metus viverra lobortis id quis quam. Vivamus hendrerit viverra nisi, at venenatis ipsum fermentum vel. Morbi viverra velit nunc, ac facilisis lectus sodales ac. Donec eleifend tortor nec lectus tristique lacinia. Integer in tellus ut enim faucibus varius. Suspendisse sit amet orci sed ante gravida condimentum.</p>
    <p>Sed elit odio, tincidunt ac felis fringilla, volutpat imperdiet lorem. Nam rhoncus magna id magna commodo rhoncus. Integer varius placerat velit quis vulputate. Suspendisse accumsan neque ante, in feugiat odio efficitur ut. Morbi euismod viverra rhoncus. Fusce dignissim dapibus est at egestas. Integer pretium cursus tempor. Suspendisse potenti.</p>
    <p>Maecenas vel lobortis ligula. Nam id pulvinar lorem. Aenean tristique dolor eget imperdiet tristique. Duis fringilla, libero et fringilla vulputate, turpis felis tristique augue, non porta nunc est quis dui. Sed imperdiet purus ex, quis faucibus nisl fermentum vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis facilisis, eros at feugiat mollis, libero quam convallis dui, at lacinia metus libero eget enim. Nunc vehicula, dui vitae tempor eleifend, ante augue scelerisque ante, vitae sagittis risus massa sit amet nisi. In imperdiet rhoncus augue, sit amet vehicula erat ultrices non. Nunc tempus in nunc a congue.</p>
    <p>Vestibulum eu auctor mi, id sagittis magna. Proin sed condimentum dolor. Etiam commodo orci nunc, eget laoreet elit blandit sed. Nam magna leo, consectetur ut molestie in, tristique sit amet orci. Donec in vehicula est. Praesent elementum faucibus nisl non fringilla. Fusce fermentum sit amet neque a convallis. Fusce a ultricies est, eget iaculis felis. Vivamus ut ante sed ligula accumsan ultricies. Mauris id est ut lacus imperdiet iaculis eget id nunc.</p>
    <p>Proin dignissim augue suscipit diam porttitor dapibus. Maecenas vel iaculis sem. Proin ut rhoncus mi. Aliquam ultrices mauris et velit lobortis aliquet. Donec quis commodo odio. Nullam nec lectus orci. Nunc id risus odio. Proin maximus odio in nibh dignissim, ut tincidunt est volutpat. Integer mollis maximus varius. Quisque dignissim lorem eu nibh vulputate gravida. Etiam accumsan lectus sit amet tortor tincidunt elementum. Nulla leo nisi, egestas ac imperdiet sit amet, sodales et urna.</p>
    <p>Proin dignissim augue suscipit diam porttitor dapibus. Maecenas vel iaculis sem. Proin ut rhoncus mi. Aliquam ultrices mauris et velit lobortis aliquet. Donec quis commodo odio. Nullam nec lectus orci. Nunc id risus odio. Proin maximus odio in nibh dignissim, ut tincidunt est volutpat. Integer mollis maximus varius. Quisque dignissim lorem eu nibh vulputate gravida. Etiam accumsan lectus sit amet tortor tincidunt elementum. Nulla leo nisi, egestas ac imperdiet sit amet, sodales et urna.</p>
    <p>Proin dignissim augue suscipit diam porttitor dapibus. Maecenas vel iaculis sem. Proin ut rhoncus mi. Aliquam ultrices mauris et velit lobortis aliquet. Donec quis commodo odio. Nullam nec lectus orci. Nunc id risus odio. Proin maximus odio in nibh dignissim, ut tincidunt est volutpat. Integer mollis maximus varius. Quisque dignissim lorem eu nibh vulputate gravida. Etiam accumsan lectus sit amet tortor tincidunt elementum. Nulla leo nisi, egestas ac imperdiet sit amet, sodales et urna.</p>
</div>

我想做的是:去掉页面末尾的100px的空隙。 (仅在 Firefox 中可见)。

当然，我知道我可以放置 div #background-gradient absolute - 这将消除这个问题。但这只是一个例子。使用 position: absolute 时，我会在 IE 中看到背景闪烁，所以我必须这样做。有关此错误的更多详细信息:background-flickering with position absolute/fixed in IE

Answer 1

使用 margin-top:-100px 而不是 top:-100px

如果您阅读 documentation about position:relative它指出:

relative
This keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of position:relative on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.

body{
    margin: 0;
    padding: 0;
    background-color: red;
}

#background-gradient{
    position: relative;
    top: 0;
    width: 100%;
    height: 100px;
    background-color: blue;
    z-index: 1;
}

#page-wrapper{
    background-color: green;
    margin: 0 auto;
    width: 600px;
    position: relative;
    margin-top: -100px;
    z-index: 2;
}

p{
    margin-top: 0;
}

p:last-child{
    margin-bottom: 0;
}

<div id="background-gradient"></div>
<div id="page-wrapper">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor facilisis ligula vestibulum fermentum. Curabitur quis imperdiet diam, quis semper velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum sollicitudin accumsan felis, eu lacinia sapien rutrum at. Quisque vel neque non metus viverra lobortis id quis quam. Vivamus hendrerit viverra nisi, at venenatis ipsum fermentum vel. Morbi viverra velit nunc, ac facilisis lectus sodales ac. Donec eleifend tortor nec lectus tristique lacinia. Integer in tellus ut enim faucibus varius. Suspendisse sit amet orci sed ante gravida condimentum.</p>
    <p>Sed elit odio, tincidunt ac felis fringilla, volutpat imperdiet lorem. Nam rhoncus magna id magna commodo rhoncus. Integer varius placerat velit quis vulputate. Suspendisse accumsan neque ante, in feugiat odio efficitur ut. Morbi euismod viverra rhoncus. Fusce dignissim dapibus est at egestas. Integer pretium cursus tempor. Suspendisse potenti.</p>
    <p>Maecenas vel lobortis ligula. Nam id pulvinar lorem. Aenean tristique dolor eget imperdiet tristique. Duis fringilla, libero et fringilla vulputate, turpis felis tristique augue, non porta nunc est quis dui. Sed imperdiet purus ex, quis faucibus nisl fermentum vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis facilisis, eros at feugiat mollis, libero quam convallis dui, at lacinia metus libero eget enim. Nunc vehicula, dui vitae tempor eleifend, ante augue scelerisque ante, vitae sagittis risus massa sit amet nisi. In imperdiet rhoncus augue, sit amet vehicula erat ultrices non. Nunc tempus in nunc a congue.</p>
    <p>Vestibulum eu auctor mi, id sagittis magna. Proin sed condimentum dolor. Etiam commodo orci nunc, eget laoreet elit blandit sed. Nam magna leo, consectetur ut molestie in, tristique sit amet orci. Donec in vehicula est. Praesent elementum faucibus nisl non fringilla. Fusce fermentum sit amet neque a convallis. Fusce a ultricies est, eget iaculis felis. Vivamus ut ante sed ligula accumsan ultricies. Mauris id est ut lacus imperdiet iaculis eget id nunc.</p>
    <p>Proin dignissim augue suscipit diam porttitor dapibus. Maecenas vel iaculis sem. Proin ut rhoncus mi. Aliquam ultrices mauris et velit lobortis aliquet. Donec quis commodo odio. Nullam nec lectus orci. Nunc id risus odio. Proin maximus odio in nibh dignissim, ut tincidunt est volutpat. Integer mollis maximus varius. Quisque dignissim lorem eu nibh vulputate gravida. Etiam accumsan lectus sit amet tortor tincidunt elementum. Nulla leo nisi, egestas ac imperdiet sit amet, sodales et urna.</p>
    <p>Proin dignissim augue suscipit diam porttitor dapibus. Maecenas vel iaculis sem. Proin ut rhoncus mi. Aliquam ultrices mauris et velit lobortis aliquet. Donec quis commodo odio. Nullam nec lectus orci. Nunc id risus odio. Proin maximus odio in nibh dignissim, ut tincidunt est volutpat. Integer mollis maximus varius. Quisque dignissim lorem eu nibh vulputate gravida. Etiam accumsan lectus sit amet tortor tincidunt elementum. Nulla leo nisi, egestas ac imperdiet sit amet, sodales et urna.</p>
    <p>Proin dignissim augue suscipit diam porttitor dapibus. Maecenas vel iaculis sem. Proin ut rhoncus mi. Aliquam ultrices mauris et velit lobortis aliquet. Donec quis commodo odio. Nullam nec lectus orci. Nunc id risus odio. Proin maximus odio in nibh dignissim, ut tincidunt est volutpat. Integer mollis maximus varius. Quisque dignissim lorem eu nibh vulputate gravida. Etiam accumsan lectus sit amet tortor tincidunt elementum. Nulla leo nisi, egestas ac imperdiet sit amet, sodales et urna.</p>
</div>