javascript - 固定顶部 div 后的可滚动 div

Question

我需要构建一个带有固定标题和可滚动列表的移动 html 页面。 header 包含一个 Logo ，该 Logo 的大小与容器的尺寸有关。

问题是列表的第一个元素位于标题下方，并且我没有定义高度，因为标题具有流动高度。

HTML:

<header>
    <figure>
        <img src="images/logo.png" />
    </figure>
</header>

<main>
    <ul id="shops-list">
        <li>Company #1</li>
        <li>Company #2</li>
    </ul>
</main>

CSS:

// global definition for fluid images
img {
    max-width: 100%;
}

header {
    width: 100%;
    position: fixed;
    top: 0px;
}

header figure {
    width: 100%;
    padding: 5px 0 5px 0;
    text-align: center;
}

header figure img {
    max-width: 100px;
}

main { 
    ???
}

编辑:

fiddle :https://jsfiddle.net/q42yaaz4/2/

Answer 1

你可以使用纯 JS 来做到这一点，因为你的 header height 不固定。 如果您将 id 添加到 header 和 main 中，效果会更好。假设您已添加该内容。

var h = document.getElementById("header").offsetHeight;
document.getElementById("main").style.marginTop = h+"px";

您可以使用此JS在main上创建一个margin-top，它等于header的可见height

更新

Fiddle ，我添加了以下代码，以配合 main 的 margin-top 调整窗口大小，因为您正在设计一个流畅的布局。

var el = document.getElementById("header");
document.getElementById("main").style.marginTop = el.offsetHeight+"px";

window.onresize = function() {
document.getElementById("main").style.marginTop = el.offsetHeight+"px";
};

尝试调整 fiddle 窗口的大小，然后看到 margin-top 立即更新，以便 main 始终出现在 header 下方