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

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>