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

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

media-queries css html

Jay · 技术社区 · 5 年前

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

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

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

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

1 回复 | 直到 5 年前

cluelessdev 5 年前

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

Torf 5 年前

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

推荐文章

Faizal Hussain · 如何在横向视图上处理媒体查询

7 年前

nCardot · 为什么是!h1元素媒体查询工作所需的重要信息?[副本]

7 年前

CDNthe2nd · HTML、CSS和媒体查询-在Chrome和firefox上调整大小是不同的

7 年前

Nathan Perigreth · 如何确定用于媒体查询的确切值?

7 年前

Gabriel Morais · CSS未应用媒体查询

7 年前

Alberto Soto · 媒体查询加载时动态激活/禁用脚本并调整窗口大小

7 年前

DarkFenix · 为什么@custom media不在sass中应用相应的样式

7 年前

Bariq Dharmawan · 基于mobile first创建网格时出现问题

7 年前

Dtrx · 媒体查询在我的情况下不起作用

7 年前

devesh kumawat Dakshesh Khatri · 如何仅获取特定专辑的歌曲

7 年前