CSS修复了未知高度的标题答案

【问题标题】：CSS Fixed header of unknown heightCSS修复了未知高度的标题
【发布时间】：2020-01-22 13:38:49
【问题描述】：

我有一个固定在页面顶部的页眉，当页面调整为更小的宽度时，它可以换行创建更高的高度。

如何使页面内容 (#wrapper) 始终从仅使用 CSS 的标题底部开始？

<body>
 <header>
  This fixed content will wrap on small devices.
 </header>
 <div id="wrapper">
  This content should always begin immediately below the header.
 </div>
<body>

【问题讨论】：

您可以在“@media”查询的标题中删除position:fixed以获取分辨率并将其更改为position:relative
您不能使position: fixed 元素与页面中的其他元素进行交互。它不再是页面的一部分......要么让它不固定，要么给它一个固定的高度......
@VitorinoFernandes 这是个好主意，但标题也需要在小屏幕上保持固定。

标签： html css layout

【解决方案1】：

由于您只想使用 CSS，您可以在 #wrapper div 上设置 padding-top，以便将内容移动到标题底部下方。然后为媒体查询中的每个屏幕尺寸调整padding-top 尺寸。

【讨论】：

我认为 JS 解决方案看起来是唯一的方法。根据标题的高度设置包装器的顶部填充。不过，我真的在寻找一种只有 CSS 的方法。
我建议您在进入移动视图时为标题使用固定高度并在#wrapper 上设置页边距顶部。移动设备上的空间有限，将大量空间浪费在标题上将是一种耻辱。您应该确保在移动设备上重要的内容不会因为不太重要的元素而受到影响。
这就是我正在做的，它很好。但是，当用户尚未验证其电子邮件地址时，我在标题顶部添加了一个额外的栏。文字很长，在平板电脑和移动设备视图中都包含在内。
其实我想我会在小屏设备的#wrapper里面的内容顶部添加验证信息。
这个额外的条有固定的高度吗？如果是这样，您可以做一个简单的条件语句来查看电子邮件地址是否未验证，并相应地设置边距顶部是否已验证电子邮件，添加和减去您正在使用的额外栏的高度。跨度>

【解决方案2】：

...如上面的 cmets 中所述，您必须使用 JS 解决方案，除非您能够知道固定标头的高度在哪些分辨率下增加，在这种情况下您可以使用媒体查询并使用 padding-top对于#wrapper 元素等于固定标题的高度，或使用高度等于标题的空元素。

【讨论】：

【解决方案3】：

如果您能够更改 HTML，那么避免使用 JavaScript 的另一种方法是包含标题元素的两个副本：

<body>
 <header id="show">
  This fixed content will wrap on small devices.
 </header>
 <header id="flow">
  This fixed content will wrap on small devices.
 </header>
 <div id="wrapper">
  This content should always begin immediately below the header.
 </div>
<body>

然后您可以将#show { position: fixed; zIndex: 10000 } 用于第一个元素（以保持标题可见），并在第二个元素上使用#flow { display: hidden } 以占用页面流中的空间。

【讨论】：