Variable content div height using css with fixed header and footer

Question

I'm having a bit of trouble with some CSS, and am seeking some help from this wonderful community.

I am trying to build a layout containing the following elements:

1) A header area 2) A footer area 3) A left hand pane 4) A content area

I have come up with the following CSS, but I do not believe this is the best way of doing what I need.

Please find below an image of what I am looking for, with all the details. Additionally, below is my current CSS and html.

CSS:

* {
    margin: 0;
}

html, body {
   height: 100%;
   overflow: hidden;
        }

#wrapper {
   min-height: 100%;
   height: auto !important;
   height: 100%;
   margin: 0 auto -100px; 
}

#leftbar {
   float: left;
   width: 350px;
   background-color: #EAEAEA;
   height: 100%;
   position: absolute;
   z-index: -1;
}

#rightbar {
}

#footer {
   height: 100px;            
}               

#header {
   height: 100px;
}

HTML:

<div id="wrapper">
    <div id="header">   </div>
        <div id="content">
            <div id="leftbar">  </div>
            <div id="rightbar"> </div>
        </div>
</div>
<div id="footer">  </div>

Desired layout:

enter image description here

Please note that although I don't mind using jQuery and javascript to accomplish this, I'd like to avoid it.

Any help will be greatly appreciated.

Thanks!

you have check this link http://stackoverflow.com/questions/3906065/css-sticky-footer sticky footer is a better option for you — sandeep, Jun 28 '11 at 07:39

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

3

Does this fiddle meet your requirements? I couldn't quite tell whether you wanted the footer to always be at the bottom of the page or not.

Update

This fiddle has the footer always at the bottom.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 28 '11 at 08:55

Spycho

7,698
3
34
55

Yes, I want the footer to be at the bottom. I want the page to be non-scrollable (overflow none), and the footer to take up the bottom 100px, header top 100px, and the content the rest. – Nabeel Jun 28 '11 at 09:02
What if the window is 300px high and the content is 200px high? What should happen to the content? I could get it to stick a scroll bar on the content? – Spycho Jun 28 '11 at 09:06
Nope, its great as it is right now. No modern device has a vertical resolution < 200px, and this particular website is designed for desktop web browser use. Thanks! – Nabeel Jun 28 '11 at 11:19
-1 doesn't work if the first column is higher than the second (add more lines in the left column and you'll see that the content doesn't grow) – Aaron Digulla Jun 28 '11 at 11:32
Works for me @Aaron... What browser are you using? I tested in Firefox 5 and Chrome. Could you elaborate on the problem you are encountering? – Spycho Jun 28 '11 at 12:25
@Spycho: Chrome 12. I added six times `
Test
` in `leftbar` and I can see only three of them (-> same height as `rightbar`). If I select the text, I can see them hidden below the footer. My conclusion: This solution is brittle. – Aaron Digulla Jun 28 '11 at 14:26
Also using Chrome 12... Still works fine for me... Adding 6 `
Test
` in leftbar shows all 6. At small heights, there's a scroll bar. At very small heights, it's not visible at all (though the OP said this was desired). You are looking at [the correct fiddle](http://jsfiddle.net/Spycho/YrRgL/2/), right? What size window are you looking at it on? You can see the test paragraphs hidden below the footer? then that's a smaller window than the OP cares about (unless the footer is not at the bottom of the window?). – Spycho Jun 28 '11 at 14:42

score 1 · Answer 2 · answered Jun 28 '11 at 07:34

1

A common question. If you can't find a suitable layout here it doesn't exist.

answered Jun 28 '11 at 07:34

SpliFF

38,186
16
91
120

score 1 · Answer 3 · answered Jun 28 '11 at 07:37

1

The article In Search of the Holy Grail on A List Apart comes up with a three-column layout that fits your description. I'd suggest you take a look at the article and omit the #right column altogether.

answered Jun 28 '11 at 07:37

jensgram

31,109
6
81
98

The layout referenced gives me the same problem I was having earlier. That is that the "content" and "left" layouts have zero heights unless something is put in them (in which case the height is the height of what is put in there). I need the layout to fill the area regardless. Is that even possible in CSS? – Nabeel Jun 28 '11 at 08:02

Aaron Digulla · Answer 4 · 2011-06-28T07:51:59.443

-1

Use a table or display: table-cell for content which has to have the same height.

[EDIT] A three column layout with a table is done in a couple of minutes and it works.

All those hacks using floating divs just create brittle layouts which sometimes work and sometimes fail. They are hard to debug, hard to get right and need a lot of CSS styles and HTML code. For little return. So if you want to waste a couple of days to get it to work, by all means use floating divs.

It's not my fault that someone said "tables are bad." It's like saying "the sun is bad because it burns you." Well, use it appropriately.

edited Jun 28 '11 at 07:51

answered Jun 28 '11 at 07:29

Aaron Digulla

321,842
108
597
820

No, `table` is the correct element for this use case. It's not my fault that someone said "tables are bad." That's like saying "too much sun is bad." Well, duh. – Aaron Digulla Jun 28 '11 at 07:45
Table should be used for tabular data. Not sure if layout is a tabular data. Ideally I would do using divs, not table. But table can be used as well. No hurt feelings. – kheya Jun 28 '11 at 07:57
2

Although using a 'table' is a perfectly valid suggestion, I would like to refrain from using them in a layout. Thanks for your response. – Nabeel Jun 28 '11 at 08:03
@Nabeel: What's wrong with using a table in a layout except that someone said a couple of years ago "don't use tables for *everything*" and people understood "don't use table"? – Aaron Digulla Jun 28 '11 at 11:31
1

I would say that using a table element in this circumstance is semantically incorrect because it is not tabular data you are attempting to represent. It would work, I just prefer an approach where the tools that you use are more closely semantically related to the problem you are trying to solve. I would be happy enough to lay certain things out in a tabular style though. You could try some of the tabular settings for the display property if you wanted. If you wanted 3x2 divs on a page, I might do this. But this isn't an overly tabular layout. Also, browser styling for tables varies. – Spycho Jun 28 '11 at 12:40
@Spycho: There is no sematically closer element if you want "same height" than `table`. – Aaron Digulla Jun 28 '11 at 14:25
Never, ever, ever, ever, ever use tables for layout. This is ridiculous advice. Tables are only, ONLY for data layout, not for design layout. This is a massively documented subject in CSS circles and this advice is more than beyond crazy. DO NOT FOLLOW THIS ADVICE. Follow @jensgram's advice below and check out A List Apart. Semantics is nothing to do with it, accessibility and the right tools for the right job are why you should not use tables in this instance. – tadywankenobi Aug 30 '13 at 15:08
@tadywankenobi: *sigh* Like all the other CSS fanatics, you miss the point. In 99% of the cases, CSS is enough. But when you need N elements with the same height, you can either spend a couple of weeks with CSS or five minutes with a table. Of course, you can waste your time all you want but I'm sick of hearing "table are sooooo bad". – Aaron Digulla Aug 30 '13 at 15:16
I resent this statement. As a member of the W3C accessibility group, I can inform you that of the incorrect ways to use tables, this is the number one. I am not merely stating this fact as a "CSS fanatic", I am stating it as someone who cares about their users, SPECIFICALLY, those who are disabled and use screen-readers, etc to access websites. This advice counters EVERY effort we have made to encourage good design practices. It is lazy and just plain wrong. There are well documented solutions. You would do well to study them. – tadywankenobi Aug 30 '13 at 15:44
@tadywankenobi: Hi, this is reality calling. The W3C is about as far away from any practical problem that I have as, say, the black hole in the center of this galaxy. I understand that you want people to use CSS and good design but unfortunately, browsers don't give a damn. And I'm not going to spend four weeks to iron out kinks for 1027 combinations browsers, browser versions and OS bugs just because of your irrational beliefs. – Aaron Digulla Sep 02 '13 at 08:52
@AaronDigulla your ignorance, your arrogance, your rudeness and your worse than useless advice are reason enough for me to terminate this conversation. You have made your own useless point here enough for anyone reviewing this question to know that you haven't a clue. Go troll someone else. – tadywankenobi Sep 04 '13 at 11:10

Variable content div height using css with fixed header and footer

4 Answers4

Update

Linked