Question

我在Firefox中遇到max-height问题。

我构建了一个简短的代码示例来显示问题。请在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中获得背景闪烁，所以我必须这样做。有关此Bug的更多详细信息：background-flickering with position absolute/fixed in IE

Answer 1

使用margin-top:-100px代替top:-100px

如果您阅读documentation about position:relative，请说明：

<强>相对
这个关键字列出了所有元素，好像元素没有定位一样，然后调整元素的位置，而不改变布局（从而为元素留下一个空隙，如果元素没有被定位的话）即可。 position：relative对表 - * - group，table-row，table-column，table-cell和table-caption元素的影响未定义。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

身高设置了高度，问题是您需要设置overflow:hidden;以防止显示完整的子元素，尽管它大于父body

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

body{
    margin: 0;
    padding: 0;
    background-color: red;
    overflow:hidden;
}

#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>

Firefox中的body max-height

2 个答案: