Приведенная ниже разметка отображается в IE, Chrome и Edge, как и ожидалось. В Firefox это заставляет тело иметь желоб в нижней части страницы, который имеет ту же высоту, что и синий div.
<html>
<body style="background-color: red; height: 100%; margin: 0;">
<div style="height: 100%"></div>
<div style=" width: 300px; height: 300px; background-color: blue; position: relative; top: -500px;"></div>
</body>
</html>
Любая помощь будет принята с благодарностью!