[Sticky footer] niepoprawne wyświetlanie

pytanie zadane 12 lutego 2017 w HTML i CSS przez Benek Szeryf (91,010 p.)
edycja 12 lutego 2017 przez Benek

Zgodnie z css-tricks próbuję zaimplementować sticky footer (pierwszy sposób) i po uruchomieniu demo w przeglądarce Firefox pojawia mi się pionowy suwak, pomimo że pojemnik content zawiera tylko jedną linię. Większość stopki jest schowana pod dolną krawędzią okna przeglądarki.

<!DOCTYPE html>
<html>
<body>
	<style>
		html, body
		{
			height: 100%;
			margin: 0;
		}
		.content
		{
			padding: 20px;
			min-height: 100%;
			margin: 0 auto -50px;
		}
		.footer, .push
		{
			height: 50px;
		}
		.footer
		{
			background-color: green;
		}
	</style>
	<div class="content">
	  <h1>Sticky Footer with Negative Margin 1</h1>
	  <p><button id="add">Add Content</button></p>
	  <div class="push"></div>
	</div>
	<footer class="footer">
	  Footer 
	</footer>
</body>
</html>

Podobnie dzieje się w przypadku algorytmu polecanego na tym forum.

P.S. Czy ktoś mógłby sprawdzić działanie tego kodu u siebie i napisać jak się zachowuje stopka?

1 odpowiedź

odpowiedź 12 lutego 2017 przez pablop76 VIP (123,180 p.)
wybrane 12 lutego 2017 przez Benek

Najlepsza

Witam. Problem jak zwykle tkwi w obramowaniach i dopełnieniach. Albo policz dokładnie wymiary albo użyj

*{
  box-sizing: border-box;
}

komentarz 12 lutego 2017 przez Benek Szeryf (91,010 p.)

Ok, działa, choć wg MDN jest to eksperymentalna technologia. Z podanej wyżej strony użyłem 4. sposobu, czyli policzyłem dokładnie wymiary:

<!DOCTYPE html>
<html>
<head>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    .content {
        min-height: calc(100vh - 50px);
    }
    .footer {
        height: 50px;
        background-color: green;
    }
    </style>
</head>
<body>
  <div class="content">
    content
  </div>
  <footer class="footer">footer</footer>
</body>
</html>