Creating a variable height "fixed" header in CSS with scrollable content

Asked 20/7, 2011 at 13:53 Answered 19/4, 2016 at 12:19

I'd like to create a header on the page that doesn't move when you scroll the page.

This seems simple, just add "position: fixed" to the style, but then the content appears underneath the header, because the header is "removed from the flow". So the solution I think is to add "margin-top: height" to the content.

Whats the best way to solve this when the height of the header is variable?

I've got a fiddle that demonstrates the problem:

http://jsfiddle.net/waterlooalex/j4Z8F/2/

Providing your browser window is not too large, the content text will scroll below the 'hello world header', the problem is that the first line of text "Lorem ipsum...' is hidden. I've got some comment out javascript that works around the issue.

Missymist answered 20/7, 2011 at 13:53 Comment(2)

So you want to make a header that will stay on top of the page and not move? Why not just make it a div and style it like a header? Seems to be the easiest way – Jaxartes 20/7, 2011 at 13:56

I'm not sure I understand. I am using a div, see the fiddle link above. – Missymist 20/7, 2011 at 14:14

You could add a second copy of the header div that's not fixed and use something like visibility:hidden on it. That way it pushes the content down to the exact spot you need, but without using JavaScript. Kinda hackish but I tried it in your fiddle and it works.

Origami answered 20/7, 2011 at 14:16 Comment(4)

Thats a cool idea, but starts to feel even more hackish if I have more content that is position: fixed... – Missymist 20/7, 2011 at 14:19

Yeah, I agree it's hackish. You could minimize the extra footprint this creates in your HTML by using alternate HTML for the hidden version, which is the same height but uses less text. In the fiddle example, something like <h1>X</h1> instead of <h1>hello world</h1>. Trivial example but with a more complex header, it could matter a lot. – Origami 20/7, 2011 at 14:38

Dirty but effective, great! – Gallion 29/5, 2013 at 19:54

should be visibility:hidden? – Accommodation 23/4, 2014 at 15:0

You can solve this using flexbox layout model as shown in the below demo.

Note that I've added display:flex to <body> for demo purpose, ideally you should give it to a more specific parent element.

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
#header {
  background: dodgerblue;
}
h1 {
  font-size: 2em;
  font-weight: 700;
}
#content {
  flex: auto;
  overflow-y: auto;
}

<div id="header">
  <h1>hello world</h1>
</div>
<div id="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et ante quam, vitae fringilla odio. Nulla molestie, justo non adipiscing varius, mi turpis luctus ligula, sit amet posuere massa elit a tellus. Cras metus risus, sagittis hendrerit sollicitudin
    in, lobortis at elit. Nam posuere molestie enim, sagittis mattis justo vehicula gravida. Fusce placerat porta fermentum. Sed laoreet leo ac tellus consectetur blandit. Sed consequat, ipsum a imperdiet convallis, elit est ultrices elit, et malesuada
    lorem magna eu eros. Sed convallis adipiscing nibh ut volutpat. In consequat egestas elit, eget venenatis lacus condimentum sed. Maecenas semper sapien in lacus feugiat volutpat vestibulum dolor pulvinar. Duis ultricies interdum ante elementum tempor.</p>

  <p>Aliquam nulla tellus, consequat nec suscipit vitae, laoreet non erat. Donec tempor ligula in nisi porttitor nec interdum magna gravida. Aenean eleifend, ipsum eu tincidunt tristique, orci mi molestie libero, at aliquam massa velit ut tortor. Aenean
    nisi velit, feugiat ut posuere eget, porta ac erat. Morbi lobortis ligula nec sem bibendum in imperdiet ipsum tempus. Integer tincidunt mauris quis justo consequat eget pharetra arcu rutrum. Nullam auctor libero luctus eros porta commodo. Aenean auctor
    libero eu arcu porta cursus. Fusce viverra arcu nec elit rutrum et fringilla lectus vulputate. Integer sed leo sit amet ligula aliquam suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla commodo
    varius lectus, non pellentesque dui ornare vel. Duis pretium purus at sapien sollicitudin posuere. Curabitur volutpat posuere diam, at tincidunt leo lacinia quis. Quisque eu arcu enim. Vestibulum condimentum condimentum erat. Sed eros erat, volutpat
    et molestie nec, pharetra vitae diam. Proin tempus, massa vitae malesuada dignissim, ipsum ipsum sagittis neque, ac vehicula neque odio nec urna.</p>

  <p>Praesent sed arcu in nunc egestas sagittis sollicitudin at nunc. Curabitur mattis viverra odio. Donec volutpat mauris nec libero molestie quis venenatis mauris convallis. Mauris porta varius nibh, id tincidunt nunc ullamcorper in. Vestibulum ante ipsum
    primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce auctor ultrices vulputate. Nam in lacus metus. Duis tempus fringilla lacus ut tristique. Nunc sed hendrerit nunc. Nunc non tellus a magna accumsan volutpat. Aenean sollicitudin
    orci in sapien interdum rhoncus cursus ligula iaculis. Nunc mauris sapien, euismod non egestas vitae, dapibus at libero.</p>

  <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque tortor nisi, pellentesque et vestibulum eu, scelerisque eget est. Vivamus porta erat vitae eros sodales accumsan. Duis ligula dui, scelerisque sollicitudin
    blandit quis, sollicitudin vel ipsum. Sed semper dictum eleifend. Duis diam leo, ultricies at consequat nec, consectetur vel lacus. Proin semper luctus nisl, ut luctus sapien egestas vitae. Maecenas eu est nisi. Aliquam erat volutpat. Sed vulputate
    ligula rutrum nunc fermentum vitae consequat magna congue. Donec accumsan consequat pellentesque. Cras justo enim, venenatis non venenatis eu, faucibus id ligula. Aliquam et lorem purus. Sed fringilla gravida dui vitae viverra. Sed id erat nisl. Nulla
    nibh nisi, luctus sed scelerisque id, congue in risus.</p>

  <p>Phasellus eu purus nibh, sit amet sodales dui. Integer tincidunt magna id sem varius faucibus. Etiam id condimentum velit. Cras cursus diam eget libero tristique malesuada. Pellentesque quis arcu tincidunt dolor adipiscing congue ut a enim. Nulla nec
    lacinia est. Pellentesque nec dui mauris, eu eleifend felis. Aliquam feugiat ultrices mi id hendrerit. Phasellus varius sagittis urna, ut fringilla nisi sollicitudin non. Pellentesque ac ligula dolor, ut volutpat sapien. Curabitur vitae diam quis
    ante laoreet suscipit non vitae tellus. Nam id magna est, eu tincidunt odio.
  </p>
</div>

Karsten answered 19/4, 2016 at 12:19 Comment(0)

This javascript will take the variable height of a fixed header and set the top margin of the content to flow underneath. Just call onload

<script type="text/javascript">
    function AdjustHeight() {
        var height = document.getElementById("fixedheader").offsetHeight;
        document.getElementById("content").style.marginTop = height + 'px';
    }    
</script>

Citriculture answered 28/11, 2011 at 5:23 Comment(0)

To fix this, I ended up adding a 'dummy' div in my content. This div has the same height as the header div, thus pushes the content down exactly enough to create the correct offset. This is the same answer as the one above by @curtisdf, however he suggests making a copy of your header, I'm suggesting making an empty div with the same height.

Since there's many reasons the height can change (window resize, content change, ...) I ended up using https://github.com/marcj/css-element-queries/blob/master/src/ResizeSensor.js to keep the height from the dummy div in sync with the real header:

        var me = this;
        var summary = me.summary;
        var dummy = me.summaryDummy;
        var resize = function () {
            dummy.style.height = summary.clientHeight + 'px';
        };
        new ResizeSensor(summary, resize);
        resize();

Note that I can reference the real header (me.summary) and the dummy (me.summaryDummy) because of aurelia.io's ref implementation, but you get a reference to your divs using JQuery or via the ID.

Wormy answered 10/6, 2015 at 21:59 Comment(0)

I have always set a margin on top of the content of however high the header is as my header's normally never need to change height.

If your header does change height then your going to have to go for the JavaScript to get around it, I'm afraid. Being out of the flow means the rest of the page will carry on as normal and JavaScript will have to step in to help.

Poser answered 20/7, 2011 at 14:11 Comment(1)

Ah, its not that the header changes height, its just that I don't know its height. E.g. its not 100px, its just some height based on whatever content is in it, and whatever size the browser decided to render that content. – Missymist 20/7, 2011 at 14:13

Recommended topics

Hot tags