代码之家 › 专栏 › 技术社区 › Jay

如何使用CSS使标头的大小有条件地增长?

media-queries css html

Jay · 技术社区 · 6 年前

我有一个网页,其标题在页面其余部分滚动时保持不变。太棒了,现在标题是{position:fixed,height:60px},我们有body{margin-top:60px]。

我们有一些响应式设计,所以在手机上,标题看起来有点不同,但没什么大不了的,媒体查询。

现在我需要在标题中添加一个按钮。。。但仅当页面的某些条件为真时。但这就是我困惑的地方。在宽屏幕上,按钮应与标题的其余部分位于同一行,在当前的60px高度内。但在手机上,没有空间,所以我需要按下下面一排的按钮。如果按钮始终存在,好吧,我可以有一个媒体查询,当宽度小于任何使标题高度为90px、正文边距为90px的值时。

但按钮并不总是出现。当按钮存在时,我如何编写css使标题高度扩展,但如果按钮不存在,则不扩展?

1 回复 | 直到 6 年前

cluelessdev 6 年前

当按钮也出现时,你能在标题中添加一个类吗?然后,您可以根据该类进行正确的样式设置。这可以使用js轻松完成。

Torf 6 年前

由于位置固定,如果不使用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>