CODEWITHSUNDEEP
htmlcsscss-position
Tommy
Tommy

Reputation: 11

Fixed header and footer with 100% scrollable content

I'm trying to create a layout in CSS where the header and footer are fixed and the content box takes up the rest of the window. The content box must be at least 100% high and be scrollable only if there is more content than fits. I also need a left box inside the content box which is 100% high at all times.

Here's a jsFiddle of my problem and here's the code I have so far 

<div id="content">
    <div id="left">
        <p>Some text</p>
        <p>Some text</p>
    </div>
    <div id="right">
        <p>Some text</p>
        <p>Some text</p>
    </div>

    <div class="cleaner"></div>
</div>

<div id="footer">
</div>


html, body {
    min-height: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
#header, #footer {
    position: fixed;
    height: 3em;
    width: 100%;
    background-color: green;
    z-index: 1000;    
}
#header {
    top: 0;
}
#footer {
    bottom: 0;
}
#content {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 3em 0;
}
#left {
    width: 20%;
    min-height: 100%;
    background-color: orange;
    border: thick solid black;
    float: left;
    margin-bottom: 3em;
}
#right {
    width: 70%;
    float: right;
    margin-bottom: 3em;
}
div.cleaner {
    clear: both;
}

The problem with the code is that the content is scrolling even if it's not needed. Also, the left box is not 100% high if there is more text in the right column.

Is there a pure CSS solution for this or do I need to use JavaScript? I've literally spent hours trying to make it work but without luck. Any help would be appreciated!

Upvotes: 0

Views: 3642

Answers (1)

SW4
SW4

Reputation: 71150

Pretty straight forward given the layout is relatively fixed, simply use position:absolute and size/offset the elements as needed:

Demo Fiddle

HTML

    html,
    body {
      margin: 0;
      height: 100%;
      width: 100%;
    }
    header,
    footer,
    content,
    aside,
    section {
      position: absolute;
      width: 100%;
      box-sizing: border-box;
      background: lightgrey;
      border: 1px solid;
    }
    header,
    footer,
    menu,
    section {
      position: absolute;
      width: 100%;
    }
    header,
    footer {
      height: 50px;
    }
    footer {
      bottom: 0;
    }
    content {
      top: 50px;
      bottom: 50px;
    }
    aside,
    section {
      top: 0;
      bottom: 0;
    }
    aside {
      width: 100px;
    }
    section {
      right: 0;
      left: 100px;
      width: auto;
      overflow-y: scroll;
    }
<header></header>
<content>
  <aside></aside>
  <section></section>
</content>
<footer></footer>

Upvotes: 2

Related Questions