Safari 15 how to remove the spacing at top and bottom of a webpage

Question

xuning0 OP

Created Jul ’21

Replies 3

Boosts 0

Views 5.6k

Participants 4

There are always spaces above and below the page. The following is the code.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <link rel="stylesheet" href="./index.css">
  <title>Document</title>
</head>

<body>
  <p>Hellow World!</p>
</body>

</html>

html {
  height: 100%;
  background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
  background-color: aquamarine;
}

body {
  margin: 0;
}

The screenshot device is iPhone 12. In order to demonstrate more clearly, I set the background-color. I want to make the gradient fill full screen.

截屏2021-07-25 下午1.50.59.png

截屏2021-07-25 下午1.33.32.png

Boost

Answer 1

carlosj OP

Jul ’21

Dealing with the same issue. Potentially they want us to rely on theme-color meta tag which is now immersive in Safari 15. Not sure that is true tho.

0

Answer 2

JosephDuffy OP

Jul ’21

To extend in to the safe area you can use min-height: -webkit-fill-available;. Note that this will also extened in to the notch when in landscape so you may want to use the safe-area-inset-* env variables, e.g. padding-left: env(safe-area-inset-left);

0

Answer 3

rmf123 OP

Feb ’22

Hi guys,

Bit late to the party, but I thought I'd post my solution anyways... With no less than 193 pixels I got the design just right on my iPhone 12 mini:

body { height: calc(100% + 193px); }

Cheers!

EDIT - I had set the viewport way off... I used "initial-scale=0.42". My bad! Just tried it with normal scale, and Safari fills te page and window nicely.

0