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

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