在固定顶部 div 之后可滚动 div

Question

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

问题是列表的第一个元素在 header 下，我没有定义高度，因为 header 具有流动高度。

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 不是固定的。如果在 header 和 main 中添加一个 id 会更好。假设你已经添加了那个。

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

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

的可见 height

更新

Fiddle，我添加了以下代码，以便在 main 的 margin-top 调整 window 的大小时伴随，因为你设计的是流式布局。

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 window 的大小，然后看到 margin-top 立即更新，因此 main 始终出现在 header

下方

在固定顶部 div 之后可滚动 div

Scrollable div after fixed top div

html

javascript

css

jquery