css - 有没有办法防止静态定位的内容尊重绝对定位的标题的高度？

Question

我想使用下面的布局在小屏幕上切换导航菜单。
差不多了，但还有一个问题（除了滚动条导致布局跳转）——因为页眉不是文档流的一部分（因为position: absolute），主要内容在页面顶部加星号并被覆盖通过不透明的标题部分。

我有一些想法如何使用 JS 来解决这个问题——测量window.getComputedStyle()可见标题部分 ( ) 的计算高度 (使用 )并将该精确高度.header-display的上边距 (或) 添加到内容中。transform: translateY但我不太喜欢这个解决方案（实际站点使用 React 并且直接 DOM 操作似乎很不习惯）。

有没有更简单（最好的情况：仅限 CSS）解决这个问题？我唯一能想到的就是在更小的屏幕上和更宽的屏幕上创建header-display元素的副本。它可以工作，但感觉就像它可能的一样hacky。visibility: hiddendisplay: none

document.onload = (function() {
  let toggle = document.getElementById("toggle")
  let menu = document.getElementById("menu")
  
  let isMenuOpen = false;

  function toggleMenu() {
    if (isMenuOpen) {
      closeMenu()
    } else {
      openMenu()
    }
  }

  function closeMenu() {
    isMenuOpen = false;
    toggle.textContent = "☰"
    document.documentElement.style.removeProperty("overflow-y")
    menu.classList.toggle("is-open")
  }

  function openMenu() {
    isMenuOpen = true;
    toggle.textContent = "✖"
    document.documentElement.style.overflowY = "hidden"
    menu.classList.toggle("is-open")
  }

    toggle.addEventListener("click", toggleMenu)
})()

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
}

.header,
.content {
  padding: 1em;
}

.header {
  background-color: rgba(100, 149, 237, 0.5);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-display {
  background-color: lightblue;
}

.menu {
  background-color: hotpink;
}

.menu ul li {
  display: inline-block;
}

.toggle {
  display: none;
}

@media screen and (max-width: 800px) {
  .header {
    position: absolute;
    padding: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 100vh;
    flex-direction: column;
  }

  .header-display {
    background-color: lightblue;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .toggle {
    display: block;
  }

  .header-display .logo,
  .header-display .toggle {
    padding: 1em;
  }

  .menu ul li {
    display: block;
  }

  .menu {
    flex: 1 0 0;
    width: 100%;
    transform: translateX(-100%);
    transition: transform 0.5s ease-in-out;
  }

  .menu.is-open {
    transform: translateX(0);
  }
}

<header class="header">
  <section class="header-display">
    <div class="logo"><strong>Logo</strong></div>
    <button class="toggle" id="toggle" type="button">☰&lt;/button>
  </section>
  <nav class="menu" id="menu">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </nav>
</header>
<main class="content">
  <p>There was the case, and of course there was but one way out of it. Might I not escort her to this place? And then, as a second thought, why should she come at all? I was Isa Whitney's medical adviser, and as such I had influence over him. I could manage it better if I were alone. I promised her on my word that I would send him home in a cab within two hours if he were indeed at the address which she had given me. And so in ten minutes I had left my armchair and cheery sitting-room behind me, and was speeding eastward in a hansom on a strange errand, as it seemed to me at the time, though the future only could show how strange it was to be.</p>

  <p>But there was no great difficulty in the first stage of my adventure. Upper Swandam Lane is a vile alley lurking behind the high wharves which line the north side of the river to the east of London Bridge. Between a slop-shop and a gin-shop, approached by a steep flight of steps leading down to a black gap like the mouth of a cave, I found the den of which I was in search. Ordering my cab to wait, I passed down the steps, worn hollow in the centre by the ceaseless tread of drunken feet; and by the light of a flickering oil-lamp above the door I found the latch and made my way into a long, low room, thick and heavy with the brown opium smoke, and terraced with wooden berths, like the forecastle of an emigrant ship.</p>

  <p>Through the gloom one could dimly catch a glimpse of bodies lying in strange fantastic poses, bowed shoulders, bent knees, heads thrown back, and chins pointing upward, with here and there a dark, lack-lustre eye turned upon the newcomer. Out of the black shadows there glimmered little red circles of light, now bright, now faint, as the burning poison waxed or waned in the bowls of the metal pipes. The most lay silent, but some muttered to themselves, and others talked together in a strange, low, monotonous voice, their conversation coming in gushes, and then suddenly tailing off into silence, each mumbling out his own thoughts and paying little heed to the words of his neighbour. At the farther end was a small brazier of burning charcoal, beside which on a three-legged wooden stool there sat a tall, thin old man, with his jaw resting upon his two fists, and his elbows upon his knees, staring into the fire.</p>

  <p>As I entered, a sallow Malay attendant had hurried up with a pipe for me and a supply of the drug, beckoning me to an empty berth.</p>

  <p>"Thank you. I have not come to stay," said I. "There is a friend of mine here, Mr. Isa Whitney, and I wish to speak with him."</p>
</main>

JsFiddle 链接

标签： csslayoutresponsive-designcss-position