Position fixed with variable height

Question

I'm looking for a way to make sure the height of a scrollable, fixed element adapts to fit all the whitespace down until the footer.

Please see the following fiddle which is the layout I'm working on.

Been stuck on this for 2 days, it's about time to move on.

Better to see the fiddle in firefox, sidebar scrollbar not scrolling in chrome for some reason but that's a different issue.

<header></header>
<div id="platformContainer">

    <section id="platformContent">
        <div id="platformBody">        
             <ul class="mainList">
                 ...                 
            </ul>
        </div>
    </section>

  <section id="toolBarContainer">
    <div id="toolBarContent">
        <ul id="toolBarList">
            ...
        </ul>
    </div>
</section>

<footer></footer>

I'm not sure I've properly understood your problem. Setting `height: 100%` instead of `height: 200px` on #toolBarList isn't doing the trick? — , Feb 22 '13 at 09:03
@HugoGiraudel ideally I could just do that but it takes the window height and if you scroll all the way down the list items overflow to the footer. I need it to go only up to the footer. — parliament, Feb 22 '13 at 09:05
@9edge I've already resorted to some javascript fiddling but still can't seem to get it. As long as it's concise and performance optimized I think I can deal with a little javascript but of course always CSS is perferable. — parliament, Feb 22 '13 at 09:06
This was helpful for a sticky CSS header: https://medium.com/@DivyanshBatham/fixed-header-sticky-footer-with-dynamic-height-947f6669b981 — Ryan, Apr 13 '20 at 18:51

score 2 · Answer 1 · edited May 23 '17 at 11:56

2

Assuming you want the toolBarList container 100% height - this is what you already have. The sidebar is 100% height. The list within, however, is only set at 200px:

#platformContainer #toolBarContainer #toolBarContent ul#toolBarList{
    height: 200px;
    ...
}

Changing that to height:100%; makes it fill the entire height of the document. The problem now is accounting for the header and footer. This is a common question, however, and I've answered it myself here: https://stackoverflow.com/a/14892331/1317805 as have many other people. You'll need to ensure that the header and footer aren't hidden by or covering the content area.

I think you might need javascript to do this – 9edge

Not at all!

Also, please note when using section tags:

Use of the element is not to be thought of as outlining content that needs to be styled visually in a particular way. If this is the case the author may be best advised to just use a semantically neutral div.

Your #platformContent and #toolBarContainer styling may yield unexpected results.

http://www.w3.org/WAI/GL/wiki/Using_HTML5_section_elements

In fact, your styling of those sections can be completely replaced with:

#platformBody, #toolBarContent {
    position:relative;
    height:100%;
    top: 70px;
    width: 100%;   
}

edited May 23 '17 at 11:56

Community

1
1

answered Feb 22 '13 at 09:09

James Donnelly

126,410
34
208
218

Thanks, I'll change to divs but negative margin-bottom does not solve to problem. My sidebar is position:fixed and should not scroll with the main content. – parliament Feb 22 '13 at 09:19
In Chrome, your sidebar *doesn't* scroll with the main content. See http://jsfiddle.net/27U5n/1/ – James Donnelly Feb 22 '13 at 09:27
I know I mentioned about chrome in my question. You just removed my footer in the fiddle, if you put clear:left back you will see the problem. – parliament Feb 22 '13 at 09:30
I haven't removed the footer, I just didn't put in the extra work needed to make it display. In my answer I linked you to another answer I wrote: http://stackoverflow.com/a/14892331/1317805 - this gives an example of how you can have 100% height content with both a header and footer. – James Donnelly Feb 22 '13 at 09:36
Thanks, I checked your example here http://jsfiddle.net/GFcBU/2/ . The variable content element in that example has a position:relative. If you zoom-in heavily until you can scroll you will see that element moves with scroll. My sidebar shouldn't move. – parliament Feb 22 '13 at 09:42
I don't really understand, you're wanting your sidebar to possibly appear on top of the header or footer if the user is zoomed in? The sidebar is set to 100% height - this is 100% of the document. If the document is zoomed in, 100% height will still be the size of the document, this is why in that JSFiddle example the content area squishes - as the header and footer have fixed heights which can't be shrunk. – James Donnelly Feb 22 '13 at 09:49
If you see my fiddle in Firefox the effect I need it that both the main content and side bar are separately scrollable between the header and footer. I essentially need the height of the sidebar to be 100% - footer height. If you set ul#toolBarList { height: 200px; } scroll down, there should be no white-space. Then set height to 100%, scroll down, it should not overlap the footer. Thanks for your help – parliament Feb 22 '13 at 10:00
The behaviour is the same in both Chrome and Firefox. The only difference is that Chrome correctly ignores visual styling on the `section` tags. `position:relative; top:70px;` won't work on `section` tags in Chrome. See the link and fix in my answer. As I've also already said, the other answer I linked to deals with displaying both header and footer with 100% height content. The whitespace is there because your 200px `ul` has a background but your 100% height containing sidebar doesn't. – James Donnelly Feb 22 '13 at 10:04
You're close to understanding what I need. When I said "there should be no white-space, I meant the sidebar height should stretch to fill the whitespace (along with the scrollbar), not simply put a background behind it meanwhile the actual sidebar is only part of that height, causing the scrollbar to end before it reaches the footer. – parliament Feb 22 '13 at 20:07
But that's what I've already provided. The JSFiddle example I gave in my first comment on this gives the sidebar at 100% page height. The problem is that this is being pushed down by the header, and is covering the footer - that's covered in my answer by the other Stack Overflow answer I provided to that other question. Combining the two = solution. I'm pretty sure I've said enough to point you in the right direction. – James Donnelly Feb 22 '13 at 21:22
No, your answers do not answer the question. The question was not to have 100% height of the page but to be variable height and fixed position between the footer and header. Your first example has no footer and like I said if you put clear:left back you will see that it does not push the sidebar up. Here is a completely reworked fiddle http://jsfiddle.net/TGw7j/5/ to show it should look like when scrolled all the way to the bottom. If you really think you have solved it then I challenge you to show me because I've tried everything you said and it does not work. – parliament Feb 22 '13 at 23:13

Position fixed with variable height

1 Answers1