3

Got stuck while trying to make an element in website behave like this:

<div class="for100procHeight">
  <div class="header">fixed top</div>
  <div class="content">long text with scrolling content</div>
  <div class="footer">fixed bottom</div>
</div>

Quick reminder of css height:

  • The percentage is calculated with respect to the height of the generated box's containing block.
  • If it has block-level children, the height is the distance between the top border-edge of the topmost block-level child box<...>
  • However, if the element has a non-zero top padding and/or top border, or is the root element, then the content starts at the top margin edge of the topmost child<...>

Optimistic solution was:

.for100procHeight { height: 100%; }
.header, .footer { height: 20px; }
.content { height:100%; overflow:scroll; }
/* failed badly: footer didn't fit into the window (heightwise) */

With diminished optimism another attempt was made:

<div class="for100procHeight">
  <div class="header">fixed top</div>
  <div class="footer">fixed bottom</div>
  <div class="wrapper">
    <div class="content">long text with scrolling content</div>
  </div>
</div>

.for100procHeight { height: 100%; }
.header, .footer { position: absolute; height: 20px; }
.content { height:100%; overflow:scroll; }
.header { top: 0px; left: 0px; }
.footer { bottom: 0px; left: 0px; }
.wrapper { padding-top: 20px; padding-bottom: 20px; }
/* failed badly: scroll down arrow was behind footer */
/* failed badly: scroll down arrow didn't fit into the window (heightwise) */

This looks almost as it should except that height is 100% of browser window (causing bottom of element to be outside of visible area). Margins/Paddings/Wrappers/etc don't change that.

I have looked at Complex height in CSS however JS support on client/element height looks even more fascinating.

Edit:

Copy paste from complex-height-in-css with extension

---------------------------------------
| fixed top |   | fixed top |        |
|-----------|   |-----------|        |
|  long   |^|   |  long   |^|        |
|  text   |_|   |  text   |_|        |
|  with   |_|   |  with   |_|        |
|scrolling| |   |scrolling| |        |
| content | |   | content | |        |
|-----------|   |-----------|        |
| fixed bott|   | fixed bott|        |
--------------------------------------

i realize having two of those was not mentioned, but neither was having <div class="for100procHeight"> as entire page content.

Solution:

<html>
<head>
    <style>
    html, body {
        height: 100%;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
    }
    .page {
        position: absolute;
        height: 100%;
        width: 100%;
    }
    .content {
        width: 100%;
        height: 100%;
        overflow: scroll;
        overflow-x: hidden;
    }
    .content .inner {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .top {
        width: 100%;
        margin-left: -17px;
        position: absolute;
        top: 0px;
        left: 0px;
        height: 30px;
        background: url('background.gif');
    }
    .bottom {
        width: 100%;
        margin-left: -17px;
        position: absolute;
        left: 0px;  
        bottom: 0px;
        height: 30px;
        background: url('background.gif');
    }
    .top span, .bottom span {
        padding-left: 17px;
        z-index: 2000;
    }
    .top span, .bottom span {
        display: block;
        width: 100%;
    }

    #list2.page {
        margin-left: 110%;
    }
    </style>
</head>
<body>
    <div id="list1" class="page">
        <div class="top"><span>top</span></div>
        <div class="bottom"><span>bottom</span></div>
        <div id="listContent" class="content">
            <a id="page1" name="page1" style="width:1px;"></a>
            <div class="inner">
            ...
            </div>
        </div>
    </div>
    <div id="list2" class="page">
        <div class="top"><span>top</span></div>
        <div class="bottom"><span>bottom</span></div>
        <div id="listContent" class="content">
            <a id="page2" name="page2" style="width:1px;"></a>
            <div class="inner">
            ...
            </div>
        </div>
    </div>
</body>
</html>
Community
  • 1
  • 1

2 Answers2

1

See below code and checkout the working solution at http://jsfiddle.net/SyHd9/4/

Cross Browser Compatibile

<div class="for100procHeight">
    <div class="header">fixed top</div>
    <div class="content">long text with scrolling content</div>       
</div>
<div class="footer">fixed bottom</div>

html { height: 100%; }
body { min-height: 100%; height: 100%; }

.for100procHeight{
    position:relative;
    width:900px;
    height:100%;
    * html height:100%;
    background-color:#ccc;
}
.header{
    width:100%;
    height:100px;
    background-color:red;
    clear:both;
}
.content{
    width:100%;
    clear:both;
}
.footer{
    width:900px;
    height:100px;
    background-color:blue;
    clear:both;
}
p{
padding:10px;
}
Hussein
  • 42,480
  • 25
  • 113
  • 143
  • I don't think your elements are nested properly... check out what happens when I give a bunch of content: http://jsfiddle.net/SyHd9/3/ – Hristo Feb 16 '11 at 05:55
  • You introduced a `p` tag, you need to add it in your styling and give it a padding. Check http://jsfiddle.net/SyHd9/4/ – Hussein Feb 16 '11 at 06:03
  • Ok... but in the link you just gave me, if you scroll down, you'll see that a bunch of text hid underneath the footer and kept on going down... am I misunderstanding something? – Hristo Feb 16 '11 at 06:09
  • with more content footer doesn't fit in browser window, same as with optimistic solution. the point is to have footer and header always visible. and only loremipsum scrollable. it's not the problem where you want to have website at least browser height –  Feb 16 '11 at 06:14
  • uh, forgot to remove `position:absolute` from footer. here it goes http://jsfiddle.net/SyHd9/11/ – Hussein Feb 16 '11 at 06:14
  • @What is the Question... if you want the header and footer *always* visible, then I recommend you checking out http://www.noobcube.com/wp-content/uploads/demos/062709-fixed-header-footer/demo/... they have an intense tutorial on how to do that. – Hristo Feb 16 '11 at 06:20
  • @what Even though you changed the question, here's the solution http://jsfiddle.net/SyHd9/18/. You have to add height and overflow to content. – Hussein Feb 16 '11 at 07:33
  • if its a matter of reputation points - suggest using frameset. i'll vote it up and accept it. as it actually solves current problem in some way –  Feb 16 '11 at 07:37
  • jsfiddle.net/SyHd9/18: for100procHeight has content of 600px heightwise (defined in css) –  Feb 16 '11 at 07:54
  • yes with Divs, you must specify content height if you want scrolling. 100procHeight has 100% height which is the overall container. – Hussein Feb 16 '11 at 08:05
1

Let me know if I have misunderstood what you're looking for, but how about something like this:

CSS

* {
    margin: 0px;
    padding: 0px;
}
html, body {
    height: 100%;
}
#wrapper {
    position: relative;
    min-height: 100%;   
}
#header {
    border: 1px solid #e3e3e3;
    position: relative;
    top: 0px;
    left: 0px;
}
#footer {
    border: 1px solid #e3e3e3;
    position: relative;
    margin-top: -20px; /* negative value of footer height */
    height: 20px;
    clear:both;
}
#content {
    overflow: auto;
    padding-bottom: 20px;
    padding-left: 20px;
}

To make this work for IE, you would need a conditional in the <head> section to feed this style to IE 6 and lower and 8 and higher.

<!--[if !IE 7]>
    <style type="text/css">
        #wrapper {display:table;height:100%}
    </style>
<![endif]-->

... and an Opera fix:

body:before {
   content:"";
   height:100%;
   float:left;
   width:0;
   margin-top:-32767px;
}

HTML

<div id="wrapper">
    <div id="header">header</div>
    <div id="content">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>
<div id="footer">footer</div>

... check out the demo on jsFiddle and a demo with scrolling content. Note that the reason there is a scroll-bar in my first example is because jsFiddle puts in a padding: 10px; on the body of the iFrame containing the demo that I can't overwrite.

Here are some reference sources on a "sticky footer" and other good stuff:

If I misunderstood what you are looking for, then maybe this is a better example?

... and the tutorial on that

I hope this helps. Let me know if you have questions.

Hristo
  • 45,559
  • 65
  • 163
  • 230
  • He wants 100% content height. – Hussein Feb 16 '11 at 05:36
  • As more content is added, the height will increase. – Hristo Feb 16 '11 at 05:38
  • This solution does not display the same in all browsers. Check IE. There's also a 20px gap at the footer. You do not have to introduce a -20 margin to compensate for the footer height. Footer may change in height and it's is not a flexible solution. – Hussein Feb 16 '11 at 05:53
  • hmm.. it should work. I was following the example from http://www.cssstickyfooter.com/. Anyway, I don't have IE on my Mac so I can't test it yet... I'll believe you. – Hristo Feb 16 '11 at 05:57
  • Oh... I was missing the bit about IE. I need to include a conditional. Check out my revision. – Hristo Feb 16 '11 at 05:58
  • Shouldn't be using conditionals and content when you don't have to. You still have a 20px gap at the footer and it doesn't display the same in Quirks mode – Hussein Feb 16 '11 at 06:10
  • Stupid IE... I'll have to get back to you on that then :/ Thanks for pointing it out. – Hristo Feb 16 '11 at 06:11
  • @Hristo :-) +1 for your efforts too – Hussein Feb 16 '11 at 06:24
  • closest so far are limpid and noobcube. i'll just check if you can have two of those in same page –  Feb 16 '11 at 06:26
  • @Hussein... Thanks haha :) @What is the Question... what do you mean "two of those in same page"? – Hristo Feb 16 '11 at 06:28
  • ohhh... this changes things slightly – Hristo Feb 16 '11 at 06:53
  • i'll make an animated video to compensate for communication skills:) –  Feb 16 '11 at 07:10
  • noobcube solved the main problem in layout. noobcube also works with two divs. noobcube is the best. noobcube time for coffee :) –  Feb 16 '11 at 09:13
  • @What is the Question... I'm glad you were able to figure it out :) Mind posting your solution? – Hristo Feb 16 '11 at 14:54
  • @Hristo Can you take a look at http://stackoverflow.com/questions/30106602/how-to-make-image-stretch-to-a-specific-paragraph ? – committedandroider May 07 '15 at 17:59