在可调整大小的网页中显示具有固定标题的内容区域

Question

我需要在页面顶部显示一个固定的标题，因此它不能超出用户的视图。问题是我需要成为一个响应迅速且可调整大小的页面，例如标题大小可以更改，高度有时是1 em或有时2em。

您可以在this fiddle中看到一个示例：

<div id="header">
    <div id="header-menu">
        <div id="header-back-button">Ac1</div>
        <div id="header-title">
            <h1>This is my so so so long title</h1>
        </div>
        <div id="header-next-button">Ac2</div>
    </div>
</div>
<div id="content">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

我需要页面的内容区域永远不会在标题后面，我知道我可以更改div的“顶部”，但由于标题大小的变化，顶部需要变量。

body{
    display:inline-block;
    width:100%;
}
#header {
    position: fixed;
    width: 100%;
    top: 0;
}
#header-menu{
    display: table;
    width:100%
}
#header-back-button {
    display: table-cell;
    width: 15%;
    min-width: 30px;
    height: 25px;
    background: orange;
}
#header-title {
    display: table-cell;
    width: 70%;
    min-width: 40px;
    background: yellow;
}
#header-next-button {
    display: table-cell;
    width: 15%;
    min-width: 30px;
    height: 25px;
    background: orange;
}

#content{
    position:  fixed;
    display:inline;
}

它必须是一个CSS解决方案。我尝试了很多东西，比如改变位置，显示器，试图让身体成为一张桌子......但是没有成功。我该怎么办？

非常感谢

Answer 1

从文档的正常流程中删除元素是有问题的，因为它们很容易重叠。

使用sticky positioning可以实现您的目标，但遗憾的是浏览器支持目前很小。

首先，删除此代码以获得正常的标题：

body{
    display: inline-block;
    width:100%;
}
#header {
    position: fixed;
    width: 100%;
}
#content{
    position: fixed;
    display:inline;
}

然后添加

#header {
    position: sticky;
    top: 0;
}

Demo