Question

我有一个固定在页面顶部的标题，可以在页面调整为较小的宽度时包装创建更多高度。

如何使页面内容（#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>

Answer 1

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

Answer 2

...正如上面的评论中已经说明的那样，你必须使用JS解决方案，除非你能够知道固定标题的高度增加了哪些分辨率，在这种情况下你可以使用媒体查询使用padding-top使#wrapper元素等于固定标题的高度，或使用高度等于标题的空元素。

Answer 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 }来占用页面流中的空间。

CSS修复未知高度的标题

3 个答案: