我想创建一个网站,其中(动态高度)页眉和页脚具有固定位置。内容应直接从标题下方开始。我做了一个快example。 (黄色和红色顶部位置相同,我希望黄色DIV从红色DIV下方开始。)
如果将标题位置设置为固定,则内容DIV将放置在标题的顶部位置。
例如,如果你使用float,你可以使用clear:both来重置位置,是否还有可能位置:fixed?
答案 0 :(得分:3)
我知道这是一篇旧帖子,但最近我自己也遇到过这个问题。所以只是想我会分享我的解决方案(虽然我还没有完全测试它 - 在这里添加免责声明)。
我在固定的(页面顶部)下面创建了另一个容器(div),具有相同的设置,类等和内容。
然后我添加了一个样式来将第二个div重置为position:static,visibility:hidden。你不需要隐藏它,因为它完全由固定的div覆盖;但以防它是一个较旧的浏览器无法识别位置:固定。
无论如何,这将为您提供一个高于您的内容的缓冲区域,该区域应该始终是正确的高度。缺点是,如果有动态内容,那么这个区域的页面将包括两次,但您需要该内容以确保隐藏的div是正确的高度。
不是一个完美的解决方案,但最好的我可以想出...使用javascript吧。
答案 1 :(得分:1)
仅CSS解决方案
用某种方法填充页眉在屏幕顶部占据的空间:
padding-top:
margin-top:
position:relative + top:
然后有一个单独的CSS样式表来更改常规height
与移动viewport
的{{1}}。
(或者请参阅下面的JavaScript解决方案,动态设置viewport
属性。)
HTML:
height
CSS(常规版):
<html>
<body>
<div id="header">
Header
</div>
<div id="wrapper">
<p>First Row</p>
<p>Next row</p>
<p>...</p>
<p>Last row</p>
<div>
</body>
</html>
CSS(移动版):
#header {
position:fixed;
height:100px;
width:100%;
background-color:green;
color:white;
}
#wrapper {
position:relative;
top:101px;
}
JavaScript解决方案
HTML (可复制和粘贴):
#header {
height:50px;
}
#wrapper {
top:51px;
}
答案 2 :(得分:0)
使用z-index(css) 一个div使它:z-index:-1; 对于其他z-index:1;
答案 3 :(得分:0)
我认为您想要的是添加一个与标题高度相等的margin-top。对于边距底部做同样的事情来容纳页脚。
答案 4 :(得分:0)
您必须使用padding-top
和padding-bottom
。在您的示例中,如果您向样式添加padding-top: 25px;
,它将显示在顶部固定div下。
如您所知,固定位置显示在浏览器的同一位置,并且在您滚动时不会移动。其余的“普通”内容不受固定定位元素的影响,因此您必须使用填充和边距来创建一些缓冲区空间。
答案 5 :(得分:0)
<body>
<div style="background-color: red; position: fixed;width:100%;">This is a test with position set to fixed</div>
<div style="background-color: yellow; height: 1000px;">This is content that should start beneath the fixed DIV</div>
</body>