CSS固定未知高度的标题 [英] CSS Fixed header of unknown height

查看:138
本文介绍了CSS固定未知高度的标题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个页眉固定在页面的顶部,当页面被调整到更小的宽度时,它可以创建更多的高度。



如何使页面页面内容(#wrapper)总是从CSS底部开始?


< header>
此固定内容将包装在小型设备上。
< / header>
< div id =wrapper>
此内容应始终在标题下方开始。
< / div>
< body>


解决方案

正如上面评论中所述,您必须使用JS解决方案,除非您能够知道固定标题的高度在哪种分辨率下增加,在这种情况下,您可以使用媒体查询,并使用等于固定标题高度的#wrapper元素的填充顶部,或者使用一个高度等于标题的空元素。


I have a header fixed to the top of the page that can wrap creating more height when the page is resized to a smaller width.

How do I make the the page content (#wrapper) always begin at the bottom of the header with CSS only?

<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>

解决方案

...As already stated in the comments above, you have to use a JS solution, unless you are able to know at which resolutions the fixed header's height increases in which case you can use media queries and either use padding-top for the #wrapper element equal to the fixed header's height, or use an empty element with height equal to the header's.

这篇关于CSS固定未知高度的标题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆