HTML&CSS + Twitter Bootstrap: full page layout or height 100% - Npx

Question

I'm trying to make following layout:

  +-------------------------------------------------+
  |       Header + search (Twitter navbar)          |
  +------------+------------------------------------+
  |            |                                    |
  |            |                                    |
  |Navigation  |         Content column             |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  +------------+------------------------------------+
  |              Footer                             |
  +-------------------------------------------------+

Layout must take all available height & width, navigation and content columns take all available space and scroll on overflow, footer should stick to bottom.

HTML looks like this now:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
    <link href="css/app.css" rel="stylesheet" media="screen">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/app.js"></script>
  </head>
  <body>
    <div class="container-fluid">   
      <div class="navbar">
        <!-- navbar content -->
      </div>

      <div class="row-fluid columns"> 
        <div class="span2 article-tree">
          <!-- navigation column -->
        </div>
        <div class="span10 content-area">
          <!-- content column -->
        </div>
      </div>

      <div class="footer">
        <!-- footer content -->
      </div>
    </div>
  </body>
</html>

CSS:



body, html, .container-fluid { /// take all available height
  height: 100%;
}

.article-tree {
  color: #DCE6E5;
  background: #2F323B;
}

.content-area {
  overflow: auto;
  height: 100%; /// explicit height to make scrolling work
}

.columns {
  height: 100%; /// columns should take all height
  margin-top: 42px; /// minus header
  margin-bottom: 20px; // minus footer
}

.columns > div {
    height: 100%; // make each column to take all available height
}

.footer {
  background: red;
  height: 20px;
}

In theory it should work, but columns.margin doesn't work as I expect. I thought it should make height = 100% - magin, but it just moves the container.

I've googled and seen numerous questions on StackOverflow. All of them include JavaScript or position: absolute and manual positioning. IMHO they're more hacks than a solutions, I think there should be some simpler and more elegant and cross-browser way to solve this problem.

So how do I make layout described above? Maybe Bootstrap can help me (I've looked through documentation, but there are no mentions of cases like this)?

Well formed question. – Timothy Lee Russell Jun 12 '13 at 02:33 — Timothy Lee Russell, Jun 12 '13 at 02:33

score 32 · Accepted Answer · edited May 23 '17 at 10:30

32

I've found a post here on Stackoverflow and implemented your design:

http://jsfiddle.net/bKsad/25/

Here's the original post: https://stackoverflow.com/a/5768262/1368423

Is that what you're looking for?

HTML:

<div class="container-fluid wrapper">

  <div class="row-fluid columns content"> 

    <div class="span2 article-tree">
      navigation column
    </div>

    <div class="span10 content-area">
      content column 
    </div>
  </div>

  <div class="footer">
     footer content
  </div>
</div>

CSS:

html, body {
    height: 100%;
}
.container-fluid {
    margin: 0 auto;
    height: 100%;
    padding: 20px 0;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.columns {
    background-color: #C9E6FF;
    height: 100%;   
}

.content-area, .article-tree{
    background: #bada55;
    overflow:auto;
    height: 100%;
}

.footer {
    background: red;
    height: 20px;
}

edited May 23 '17 at 10:30

Community

1
1

answered Jan 06 '13 at 06:15

belens

962
1
8
18

1

Didn't work out :( http://jsfiddle.net/B9sMw/ - scrollbar there + some odd spacing above navbar (see comments, i've tried couple of ways) – Daniel Jan 06 '13 at 06:34
I'd just make the navbar absolute. I know you're trying to avoid that, but in this case it's pretty graceful imho. http://jsfiddle.net/B9sMw/1/ – belens Jan 06 '13 at 07:26
It is indeed. Hm, ah let it be :) Thank you for help! – Daniel Jan 06 '13 at 08:17
1

There is a small bug in the footer of this JSFiddle, the footer doesn't seem to stick to the bottom? – Mark Jun 05 '13 at 06:06
How would you combine this with a fixed width on the left column? I tried `min-width` but that made the content column pop down when resizing. – Wrench Jul 04 '13 at 13:40

score 16 · Answer 2 · edited Nov 18 '16 at 16:11

16

I know it's late in the day but might help someone else!

body,html {
  height: 100%;
}

.contentarea {

 /* 
  * replace 160px with the sum of height of all other divs 
  * inc padding, margins etc 
  */
  min-height: calc(100% - 160px); 
}

edited Nov 18 '16 at 16:11

nulll

1,465
1
17
28

answered Jun 17 '14 at 21:48

Ed Wade

161
1
2

1

Did not know about calc! Browser support is not great but it works very well in chrome and firefox. – Johnride Jul 08 '14 at 15:49

Piotr Knut · Answer 3 · 2014-09-27T14:05:41.200

if you use Bootstrap 2.2.1 then maybe is this what you are looking for.

Sample file index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/Site.css" rel="stylesheet" />
</head>
<body>
    <menu>
        <div class="navbar navbar-default navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/">Application name</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="/">Home</a></li>
                        <li><a href="/Home/About">About</a></li>
                        <li><a href="/Home/Contact">Contact</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="/Account/Register" id="registerLink">Register</a></li>
                        <li><a href="/Account/Login" id="loginLink">Log in</a></li>
                    </ul>

                </div>
            </div>
        </div>
    </menu>

    <nav>
        <div class="col-md-2">
            <a href="#" class="btn btn-block btn-info">Some Menu</a>
            <a href="#" class="btn btn-block btn-info">Some Menu</a>
            <a href="#" class="btn btn-block btn-info">Some Menu</a>
            <a href="#" class="btn btn-block btn-info">Some Menu</a>
        </div>

    </nav>
    <content>
       <div class="col-md-10">

               <h2>About.</h2>
               <h3>Your application description page.</h3>
               <p>Use this area to provide additional information.</p>
               <p>Use this area to provide additional information.</p>
               <p>Use this area to provide additional information.</p>
               <p>Use this area to provide additional information.</p>
               <p>Use this area to provide additional information.</p>
               <p>Use this area to provide additional information.</p>
               <hr />
       </div>
    </content>

    <footer>
        <div class="navbar navbar-default navbar-fixed-bottom">
            <div class="container" style="font-size: .8em">
                <p class="navbar-text">
                    &copy; Some info
                </p>
            </div>
        </div>
    </footer>

</body>
</html>

File Content/Site.css

body {
    padding-bottom: 70px;
    padding-top: 70px;
}

score 0 · Answer 4 · edited May 31 '14 at 14:36

0

Is this what you are looking for? Here is a fiddle demo.

The layout is based on percentage, colors are for clarity. If the content column overflows, a scrollbar should appear.

body, html, .container-fluid {
  height: 100%;
}

.navbar {
  width:100%;
  background:yellow;
}

.article-tree {
  height:100%;
  width: 25%;
  float:left;
  background: pink;
}

.content-area {
  overflow: auto;
  height: 100%;
  background:orange;
}

.footer {
   background: red;
   width:100%;
   height: 20px;
}

edited May 31 '14 at 14:36

Graham

7,431
18
59
84

answered Jan 06 '13 at 06:23

fbynite

2,651
1
21
25

2

that won't work and thats already seen in jsfiddle: you have scrollbar because navbar height + columns height (100%) + footer height is > 100% – Daniel Jan 06 '13 at 06:35

HTML&CSS + Twitter Bootstrap: full page layout or height 100% - Npx

4 Answers4

Linked