CSS修复未知高度的标题

时间:2014-10-02 15:06:07

标签: html css layout

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

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

3 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

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

答案 2 :(得分:0)

如果您能够更改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 }来占用页面流中的空间。