CSS未知高度的固定标题

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

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

来源

2014-10-02 Asa Carter

您可以在'@media'查询分辨率的标题中删除'position：fixed'并将其更改为'position：relative' – 2014-10-02 15:12:43

您不能让位置：fixed元素与其他人进行交互页。它不再是页面的一部分了....要么使它不固定，要么给它一个固定的高度...... – LcSalazar 2014-10-02 15:16:46

@VitorinoFernandes这是一个好主意，但标题也需要在小屏幕上保持固定。 – 2014-10-02 15:17:27

...正如上面评论中所述，除非您能够知道固定标题的高度在哪种分辨率下增加，您可以使用媒体查询并使用填充 - 顶部的#wrapper元素等于固定标题的高度，或使用高度等于标题的空元素。

来源

2014-10-02 15:39:55 scooterlord

由于只想使用CSS，你可以只设置padding-top您#wrapper DIV所以它使得接头的底部下方的内容。然后调整媒体查询中每个屏幕大小的padding-top大小。

来源

2014-10-02 15:16:59

是否为你工作？ – 2014-10-02 15:21:02

我认为JS解决方案看起来是唯一的方法。根据标题的高度设置包装的顶部填充。尽管如此，我真的只是在寻找一种CSS。 – 2014-10-02 15:27:51

当你到达一个移动视图并在你的#wrapper上设置一个margin-top时，我会建议你为这个头部起一个固定的高度。移动设备上只有有限的空间，如果将其浪费在标题上，将会是一种耻辱。您应该确保移动设备上重要的内容不会因为不太重要的元素而受到影响。 – 2014-10-02 15:31:25

CSS未知高度的固定标题

回答

相关问题