Question

我需要构建一个带有固定标题和可滚动列表的移动html页面。标题包含一个徽标，该徽标具有与容器尺寸相关的外部尺寸。

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

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 { 
    ???
}

编辑：

小提琴：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在margin-top上创建main，其等于height的可见header

<强>更新

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

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

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

尝试调整小提琴窗口的大小，然后立即更新margin-top，以便main始终显示在header

下方

固定顶部div后的可滚动div

1 个答案: