Dynamic Header / Footer Scroller

Question

What I'm looking for is to have a div container with any number of headers and footers, which will then have a div scroll between the different headers. The catch here is that the headers and footers cannot scroll, and the container / headers / footers can occupy any height depending on their contents.

I managed to get this working with a static header / footer size. In the code, I added a problem that I ran into: the text in the header and footer can be wrapped, which will lead to two lines. Thus, the title should be enlarged to allow this extra line, and the content should be compressed to give place to the title. Is there any way to do this without using javascript? I will know the number of headers / footers ahead of time if that helps.

This will be a component on the page, possibly with one or more pages, for example, in the 2x2 setting, where each takes fourth place in the browser window. Functionality is mostly needed because the width of the browser can change, causing the contents of the header to break a new line. This can be done quite easily with javascript, but I have always heard that resize event handlers are evil.

For example, if my 600px wrapper 600px tall, I may have 2 headers and 1 footer. Suppose that the first content of the header causes it to split into a new line, but the second header does not work. Thus, the height of the first headers is 20px , where the second is 10px . And lets say that the content of the footer also causes line breaks and therefore has a height of 20px . This gives us 50px value of the headers and footers, so now the scroller's height should be 550px .

Ascii Art:

  ____________________________________________ | HEADER 1 | |________breaks to new line__________________| |____________________________HEADER2_________| | | || | | || | This is my scroller | || | | || | | || | | || |_________________________________________|_|| | Some | |_____Footer_________________________________| 

HTML:

 <div class="wrapper"> <div class="header"> Some<br/> Header </div> <div class="scroller"> Content<br /> Content<br /> Content<br /> Content<br /> ... </div> <div class="footer"> Some<br/> Footer </div> </div> 

CSS

 body{ height:100%; } .wrapper{ height:400px; border-left:1px solid red; } .header, .footer{ background-color: #EEE; height:27px; } .scroller{ height:calc(100% - 54px); background-color: #CCC; overflow:auto; } 

the red frame shows how far the wrapper goes down, so the footer is not displayed below. I did this instead of overflow: hidden just for debugging.

http://jsfiddle.net/yKTdz/4/

Answer 1

This can now be done using the CSS grid quite easily. without the need for filler elements.

If you need several headers, just put several divs there, or make a “header” div a flexbox if you need it.

HTML remains unchanged:

 <div class="wrapper"> <div class="header"> Some<br/> Header </div> <div class="scroller"> Content<br /> Content<br /> Content<br /> Content<br /> ... </div> <div class="footer"> Some<br/> Footer </div> </div> 

CSS

 .wrapper{ height:400px; border-left:1px solid red; display: grid; grid-template-columns: 1fr; grid-template-rows: [header] auto [content]1fr [footer]auto; } .header{ background-color: #EEE; grid-row: header; } .footer{ background-color: #EEE; grid-row: footer; } .scroller{ background-color: #CCC; overflow:auto; grid-row: content } 

http://jsfiddle.net/yKTdz/15/

Answer 2

Achieved using pure CSS (even CSS3) by mixing table display with relative and absolute positioning.

Running Demo: http://jsfiddle.net/x4vhW/

HTML

 <div class="wrapper"> <div class="tr stretch"> <div class="td">a header</div> </div> <div class="tr"> <div class="td"> <div class="contentWrapper"> <div class="content"> content 0 ............... ............... ............... content 29 </div> </div> </div> </div> <div class="tr stretch"> <div class="td stretch">a footer</div> </div> </div> 

CSS ^{Dark Magic (tm)}

 .wrapper { height : 200px; width : 200px; display : table; } .tr { display : table-row; } .td { display : table-cell; } .stretch { height : 1%; } .contentWrapper { position : relative; overflow-y : scroll; height : 100%; } .content { position : absolute; right : 0; left : 0; } 

Note: the stretch class is used to prevent the growth of headers and footers if the content has little content; with a stretch, they will be automatically fitted.

And finally, according to CanIUse , it is supported by almost all browsers , including IE8.

Answer 3

I made a decision by Matt Cooper and updated it a bit. This eliminates the inability to add more than one widget per page, as well as a problem with the size of the footer.

http://jsfiddle.net/XSADu/10/

Steps:

• Make the wrapper relative so absolute children can position
• Make the header, footer, scroller absolute. Place footer below
• Add javascript to determine the size of the scroller top / bottom.

CSS

 .wrapper{ height:400px; border-left:1px solid red; position: relative; } .header, .footer, .scroller { background-color: #EEE; position:absolute; width: 100%; } .footer { bottom: 0; } .scroller{ background-color: #CCC; overflow:auto; } 

Js

 $(document).ready(function(){ $('.scroller').css("top", $('.header').height()); $('.scroller').css("bottom", $('.footer').height()); }); 

NOTE. If the size of the header / footer is dynamic, you can tell them the maximum height as a percentage of the wrapper so that the content is not hidden.

Answer 4

Based on DMoses answer, this solution includes a bit more jquery, but it fixes the problem of scrolling the scrollbar under the footer / header

jQuery:

 $(document).ready(function(){ $('.scroller').css("margin-top", $('.header').height()); var height = $('.wrapper').height() - ($('.footer').height() + $('.header').height()); $('.scroller').css("height", height); }); 

jsfiddle.net/XSADu/5/

Answer 5

There is no way to do this with only Css. You will need to use Javascript to check the height of the header and footer when the page loads and adjusts accordingly. Otherwise, when you use the position: fixed, you will get some coincidence. See Attached Violin! http://jsfiddle.net/XSADu/

I use jQuery to adapt the top layer on a scroller to a finished document. So

 $(document).ready(function(){ $('.scroller').css("padding-top", $('.header').height()); }); 

Answer 6

As Matt Cooper stated, I don't think there is a clean css solution. Here is my attempt: jsfiddle

 var CalcHeight = function() { this.init = function() { var totHeight = $('body').height(); var componentsHeight = $('.headers').height() + $('.footers').height(); var diff = totHeight - componentsHeight; $('.hider').css({ height: diff }); } this.init(); } var calcHeight = new CalcHeight;