CODEWITHSUNDEEP
htmlcss
tuco
tuco

Reputation: 633

Frame-like behavior with scrolling center

I want a frame-like behavior, where I have a header (non-scrolling), footer stays at the bottom (non-scrolling), and in the middle to have two vertical divs. If content in these divs is too long for a window, they should show their own scrollbars - that is- no scrollbars in the body itself. I can't figure out how to make the div's width be: current-window-size - (footer + header). Is there a way to do it with CSS alone? (browser support needed IE9+)

HTML

<body>
<header>
    <p>Header here</p>
</header>
<div> Something else here</div>
<main>
    <div id="pane-1" style="background-color:#eee;"> 
        Have your own scrollbar
    </div>
    <div id="pane-2" style="background-color:#ccc;"> 
        Have your own scrollbar too
    </div>
</main>
<footer style="background-color: #FFC;"> Footer here - should not scroll</footer>
</body>

CSS

html,
body {
    overflow: hidden;
    margin:0;
}

#pane-1,
#pane-2 {
    display: inline-block;
    vertical-align: top;
    overflow: auto;
    width: 49%;
}


footer {
    height: 70px;
    width:100%;
    position: absolute;
    bottom: 0;
}

Here is my code http://codepen.io/anon/pen/tyvAe

Upvotes: 0

Views: 794

Answers (3)

Markus Szumovski
Markus Szumovski

Reputation: 124

I don't know a realy good way to do this without Javascript, but here's mine with as little Javascript as possible (you'll need JQuery for this one): http://jsfiddle.net/g13ogq2u/2/

Basically it's for the CSS:

html {
    height:100%;
    width:100%;
}
body {
    width:100%;
    height:100%;
    margin: 0px;
    padding: 0px;
    background-color: #ffffff;
}
.header {
    width:100%;
    height: 50px;
    min-height:50px;
    padding:0px;
    background-color:#CCAA00;
}
.page {
    min-height: 100%;
    height: auto !important;
    /*Cause footer to stick to bottom in IE 6*/
    height: 100%;
    margin: 0 auto -70px;
    /*Allow for footer height*/
    vertical-align:bottom;
}
.content {
    height:100%;
    width:100%;
    margin:0;
    position:relative;
    overflow:hidden;
}
.subContent {
    height:100%;
    width:50%;
    min-height:100%;
    margin:0;
    float:left;
    overflow:auto;
}
#subContentA {
    background-color:#EEEEEE;
}
#subContentB {
    background-color:#CCCCCC;
}
.pushFooter {
    height: 70px;
    /*Push must be same height as Footer (including its paddings) */
    min-height:70px;
}
.footer {
    height: 70px;
    /*Push must be same height as Footer */
    min-height:70px;
    width:100%;
    padding:0px;
    margin:0px;
    background-color:#FFFFCC;
    position:relative;
    overflow:hidden;
}

The little JQuery code is:

$.fn.doFitSize = function () {
    var dHeight = $(window).height();

    var hHeight = $(this).prevAll().outerHeight();
    var fHeight = $(this).nextAll().outerHeight();

    var cHeight = dHeight - hHeight - fHeight;

    $(this).height(cHeight);
}

$(document).ready(function () {
    $('.content').doFitSize();
});

$(window).resize(function () {
    $('.content').doFitSize();
});

And the HTML would be:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <style type="text/css">
        /* add mentioned style here */
    </style>

    <script src="jquery-1.9.1.js" type="text/javascript" ></script>
    <script type="text/javascript">
        /* add mentioned script here */
    </script>
</head>
<body>
    <div class="page">
        <div class="header">
            <span>this is the header</span>
        </div>
        <div class="content">
            <div id="subContentA" class="subContent">
                <span>This is the left content.</span>
            </div>
            <div id="subContentB" class="subContent">
                <span>This is the right content</span>
            </div>
        </div>
        <div class="pushFooter"></div>
    </div>
    <div class="footer">
        <span>And this is the footer</span>
    </div>
</body>
</html>

Hope it helps ;)

Upvotes: 1

SW4
SW4

Reputation: 71170

Why not use the magic of semantic HTML and absolute positioning (note, background colors are used below to clearly show the various sections)

HTML

<header></header>
<section></section>
<section></section>
<footer></footer>

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
header, footer, section {
    position:absolute;
    width:100%;
}
header, footer {
    height:50px;
    background:red;
}
footer {
    bottom:0;
}
section {
    width:50%;
    overflow:auto;
    background:blue;
    top:50px;
    bottom:50px;
}
section:last-of-type {
    background:yellow;
    left:50%;
}

Upvotes: 1

ekerner
ekerner

Reputation: 5840

You can do this with css...

#pane-1, #pane-2 {
  width: 200px;
  height: 200px;
  overflow: scroll;
}

Depending on what you need, you may also like to play with css property: max-height in place of height.

Upvotes: 0

Related Questions