Höjden 100vh gäller inte på iPhones, använd -webkit-fill-available!

iOS har ett adressfält som gömmer den nedersta delen av hemsidan. Genom att använda en Apple/webkit-specifik CSS-egenskap så kan man rätta till felet.

CSS-flex är ett perfekt redkspa för att få till en header och footer som den fasta högsta och lägsta delen av den synliga hemsidan.

HTML

// HTML

<body>
  <header>Högst upp</header>
  <main>Huvudinnehåll</main>
  <footer>Längst ned</footer>
</body>

CSS

body {
  display: flex; 
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

Problemet uppstår enbart på iOS-enheter och innebär att footer-elementet göms under Safaris adressfält. Genom att använda en Safari-bekant CSS-egenskap -webkit-fill-available kan man tvinga Safari till att exkludera ytan under adressfältet som tillgängligt.

CSS med buggfixen

body {
  display: flex; 
  flex-direction: column;
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

main {
  flex: 1;
}

Uppdatering (2024-01-17)

Nu kan man använda svh (small viewport height)-unit för att exkludera webbläsarens adressfält.

body {
  display: flex; 
  flex-direction: column;
  min-height: 100svh;
}

main {
  flex: 1;
}

4 januari 2023