Multiple Scroll Areas

by bizamajig

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<html>

<head>

    <link rel="stylesheet" media="screen" href="normalize.css">
    <link rel="stylesheet" media="screen" href="bootstrap.min.css">

</head>

<body>

    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                header contents
            </div>
        </div>
    </div>

    <div class="container max-height no-overflow">
        <div class="row max-height">

            <div class="span8 scrollable">
                <div class="pad40-top">
                    main contents<br/>
                    main contents<br/>
                    main contents<br/>
                    main contents<br/>
                    main contents<br/>
                    main contents<br/>
                    main contents<br/>
                    main contents<br/>
                    main contents<br/>
                    main contents<br/>
                    main contents<br/>
                    main contents<br/>
                    main contents<br/>
                    main contents<br/>
                    main contents<br/>
                    main contents<br/>
                    main contents<br/>
                    main contents<br/>
                    main contents<br/>
                    main contents<br/>
                    main contents<br/>
                    main contents<br/>
                    main contents<br/>
                    main contents<br/>
                    main contents<br/>
                    main contents<br/>
                    main contents<br/>
                    main contents<br/>
                    main contents<br/>
                    main contents<br/>
                    main contents<br/>
                    main contents<br/>
    ...

CSS

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

            .navbar-inner {
                height: 40px;
            }

            .scrollable {
                height: 100%;
                overflow: auto;
            }

            .max-height {
                height: 100%;
            }

            .no-overflow {
                overflow: hidden;
            }

            .pad40-top {
                padding-top: 40px;
            }