Displaying content area with a fixed header in a resizable webpage - css

Question

I need to show a fixed header in the top of the page, so it can't be out of the user's view. The problem is I need to be a responsive and resizable page, so e.g. the header size can change and the height sometimes is 1 em or sometimes 2em.
You can see an example in 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>
I need the content area of the page never be behind the header, and I know I can do it changing the "top" of the div, but that top need to be variable, because of the changing header size.
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;
}
It has to be a CSS solution. I tryed a lot of things, like changing the position, the display, trying to make the body a table... But with no success. How can I do it?
Thanks a lot

Answer 1

Removing elements from the normal flow of the document is problematic, because then they overlap easily.
What you want can be achieved with sticky positioning, but sadly browser support is currently small.
First, remove this code in order to have a normal header:
body{
display: inline-block;
width:100%;
}
#header {
position: fixed;
width: 100%;
}
#content{
position: fixed;
display:inline;
}
And then add
#header {
position: sticky;
top: 0;
}
Demo