Body max-height in Firefox
I have a problem with max-height in Firefox.
I am creating a short code example to show the problem. Open this example in Chrome and Firefox. The behavior in Firefox is not the same as in 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>
What I want to do: remove 100px space at the end of the page. (which is only visible in Firefox).
Off course, I know that I can put in an absolute div # abstractor that will fix this problem. But this is just an example. When using position: absolute, I get background flickering in IE, so I have to do it this way. More on this error: background flickers at absolute / fixed position in IE
+3
source to share
2 answers
Use margin-top:-100px
insteadtop:-100px
If you've read the documentation aboutposition:relative
, it states:
relative
This keyword sets all elements as if the element were not positioned, and then adjusted the position of the element without changing the layout (and thus leaving a space for the element wherever it was placed) . Position effect: relative by table - * - group, column, column, table and table element - 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>
+2
source to share
Height is set to body, the problem is that you need to set overflow:hidden;
to prevent the full child from being shown, even though it's larger than the parentbody
$(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>
0
source to share