如何使用 CSS 使 header 的大小有条件地增长？

Question

我有一个带有 header 的网页，它在页面其余部分滚动时保持固定。太好了，现在 header 是 {position: fixed, height: 60px} 我们有 body {margin-top: 60px}.

我们有一些响应式设计，因此在单元格 phone 上 header 看起来有点不同，但没什么大不了的，媒体查询。

现在我需要向 header 添加一个按钮...但前提是页面的某些条件为真。但这就是我难住的地方。在宽屏幕上，该按钮应与 header 的其余部分位于同一行，在当前 60 像素高度内。但是在单元格 phone 上没有空间，所以我需要将按钮向下推到下面的行。如果按钮始终存在，好吧，我可以有一个媒体查询，说当宽度小于使 header 高度为 90px 和 body margin-top 90px 的任何值时。

但按钮并不总是出现。我怎样才能写 css 使 header 高度在按钮存在时扩展，如果按钮不存在则不扩展？

Answer 1

只要按钮也存在，您能否在 header 中添加 class？然后你可以根据 class 做正确的样式。这可以使用 js 轻松完成。

Answer 2

在位置固定的情况下，如果不使用 JavaScript 就很难实现此功能。

但是 most modern Browsers 可以与 sticky

一起使用

body,
html {
  margin: 0;
  padding: 0;
}

header {
  position: sticky;
  top: 0;
  background-color: rgba(63, 63, 191, 0.8);
  color: white;
}

header p {
  margin-top: 0;
}

#pageContent {
  height: 110vh;
}

<header>
  <p>my Header</p>
  <p>some extra Content</p>
</header>
<div id="pageContent">
  Here be text<br/> and text</br>
  and even more text
</div>

如何使用 CSS 使 header 的大小有条件地增长？

How do I make the size of a header grow conditionally using CSS?

html

css

media-queries