Question

也许我在搜索时没有使用正确的关键字，但我找不到解决问题的方法。

这是：

我有一个固定的顶部横幅图像，使用100％宽度和自动高度。我想在它下面添加我的导航和内容。棘手的是，我希望导航和内容从下面滚动图像，同时图像保持固定在页面顶部。

有没有办法确定图像的高度（相对于某人的屏幕尺寸）并自动将其用作导航div的margin-top？那理论上可以解决我的问题。

修改;在解决了最初的问题时，发生了另一个问题。 #nav div现在似乎认为＃banner-image的底部是屏幕的顶部。这可能是什么？

欢迎任何其他想法！

这是我的代码：

HTML

<img src="images/banner.jpg" id="banner" />

<div id="nav" >
    [...]
</div>

CSS

#banner {
    position: fixed;
    top: 0;
    width: 100%;
    height: auto;
}    

#nav    {
    background-color: #261E03;
    width: 100%;
}

Answer 1

你不能通过CSS做到这一点...... 您可以尝试使用Jquery：

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
    $(document).ready(function(){
        $("#nav").css({
            "padding-top" : $("#banner").height()
        });
    });
</script>

我想在自动高度的固定图像下面放置一个div

1 个答案: