Question

我正在寻找一种方法，在页面顶部有一个固定元素，根据页面宽度改变高度，这也会推回下面的内容。到目前为止我已经做了一些事情，但我希望有一个更清洁的解决方案。我所做的是拥有2个具有相同内容的顶级元素。一个设置为固定位置，另一个设置为相对位置，但没有不透明度...

#top-1 { position: fixed; background-color:#fff}
#top-2 {position: relative; opacity:0;}
#content { background-color: #FFF; background-color:#CCC }

我在这里设置了一个示例http://jsfiddle.net/q3G7F/6/ 它正是我需要它的工作方式，但也许有人有更好的想法？谢谢，

Answer 1

您可以使用小型jQuery（或javascript）代码段执行此操作将CSS更改为：

#top-1 { position: fixed; top: 0; background-color:#fff}
#content { background-color: #FFF; background-color:#CCC }

在页面底部添加此脚本（需要jQuery）。这应该为内容添加一个上边距，并为您的顶级元素腾出空间。

<script>
    $(document).ready(function() {
       $('#content').css('margin-top', $('#top-1').height() + 'px');
    }); 
</script>

以下是一个有效的例子：http://jsfiddle.net/g6CnA/。

更新

您还需要收听窗口调整大小事件，并在顶部元素的高度发生变化时调整边距。

$(document).ready(function() {
    $('#content').css('margin-top', $('#top-1').height() + 'px');   
}); 

$(window).resize(function() {
    $('#content').css('margin-top', $('#top-1').height() + 'px');        
});

jsFiddle：http://jsfiddle.net/g6CnA/1

Answer 2

在CSS中，如果在#top-1和#content的父元素上设置显式高度（以px或任何非％％），则应该能够设置{{1 height的{{1}}和#top-1的{{1}}达到相同的百分比。这将为您提供所需的行为，但如果您可以明确设置其父级的高度，则此特定方法仅有效。

固定元素，推回内容

2 个答案:

更新