Mam stały nagłówek z position:fixed Dlaczego pozostaje na szczycie innych elementów i ukrywa ich, więc muszę dodać padding do main., ponieważ wysokość header zmienia się przez Zawartość, rozmiar czcionki i wyściółka ustawiona przez zapytania multimedialne Nie można użyć stałej wartości dla padding jak w fragmence. Czy istnieje rozwiązanie, które szanuje zmianę wysokości header bez użycia JavaScript?

body {
  margin: 0;
  padding: 0;
}

header {
  background-color: grey;
  position: fixed;
  width: 100%;
}

main {
  padding-top: 80px; /* bad, because it's fixed */
}
<header>
  <h1>Example</h1>
</header>
<main>
  <p>Content</p>
</main>
0
Hativ 17 luty 2017, 02:25

2 odpowiedzi

Najlepsza odpowiedź

Jak powiedzieli inni, nie możesz tego zrobić bez JavaScript, ale możesz udać stały nagłówek za pomocą flexbox i {x0}} na głównej zawartości.

* {margin:0;}
body {
  display: flex;
  flex-direction: column;
  max-height: 100vh;
}
section {
  flex-grow: 1;
  overflow-y: scroll;
}
main {
  background: #eee;
  min-height: 500vh;
}
<header>
  <h1>Example</h1>
</header>
<section>
  <main>
    <p>Content</p>
  </main>
</section>
<footer>
  <p>footer</p>
</footer>
2
Michael Coker 17 luty 2017, 15:46

Nie ma sposobu, aby osiągnąć go bez użycia JavaScript, jeśli chcesz zachować stałą pozycję. Zaproponowałem wcale nie używać pozycji, ale szanuje hierarchię HTML. I uczynić go "naprawionym" po przewijaniu wyprowadze go z rzutni. Jest to najbardziej typicall podejście, gdy chcesz mieć nagłówek przez cały czas, jeśli wysokość może się różnić.

2
Ricardo Zorzo 16 luty 2017, 23:53