.top, .bottom {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding-top: env(safe-area-inset-top);
  background: bisque;
}

.bottom {
  top: unset;
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom);
  background: beige;
}

.top::after, .bottom::after {
  content: 'a';
  color: transparent;
  user-select: none;
}

.content {
  line-height: 1.5;
  padding: 32px;
  background-color: white;
}

header, footer {
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: bisque;
}

footer {
  background-color: beige;
}

body{
  position: relative;
  margin: 0;
  font-family: sans-serif;
  background-color: beige;
}