Twitter Bootstrap 3 - max height, custom layout

Question

I have something like this:

+-------------------------------------------+
|             -- navigation --              |
+------+------------------------------------+
|      |                                    |
| left |                                    |
| side |                                    |
| with |                                    |
| affix|           -- content (white) --    |
| menu |                                    |
|-black|                                    |
|      |                                    |
|      |                                    |
|      +------------------------------------+
|      |           -- footer (white) --     |
+------+------------------------------------+

as my layout in TB 3.0, and some code:

<body>
    <header>
        <div class="row">
            <div class="col-md-12>-- navigation (height = 50px) here --</div>
        </div>
    </header>

    <div class="row">
        <div class="col-md-4">-- left side with black background here --</div>
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-12">-- content with white background here --</div>
            </div>

            <div class="row">
                <div class="col-md-12">-- footer (height = 50px) with white background here --</div>
            </div>
        </div>
    </div>
</body>

I want make my left side (with black background) and content (white background) with height = 100% of my browser window and footer (white background) below my content to be visible (also on scroll).

For now, I get height of last element of the side. If my content is short, it ends for example in the center of vertical side of my browser.

Here is it: http://codepen.io/anon/pen/FxImy

Man, it is really confusing trying to follow all of that by way of explanation - can you throw some code on codepen.io and link to it? — Shawn Erquhart, Oct 25 '13 at 15:20
I am so sorry :) I forgot about that. I edited my question and I added link at the end. — mrzepinski, Oct 25 '13 at 15:32

score 11 · Accepted Answer · edited May 23 '17 at 12:24

Pure CSS Solution (using calc)

If you can use CSS3, and this 50px height is static, you can use calc to achieve your layout.

Here's a DEMO

HTML

<header>
        Header
</header>
<div id="Container">
    <div id="Left">I'm in the left menu</div>
    <div id="Right">
        <div id="Content">Content</div>
        <footer>Footer</footer>
    </div>
</div>

CSS

*
{
    padding: 0;
    margin: 0;
}
html, body
{
    height: 100%;
}

header, footer
{
    height: 50px;

    background-color: yellow;
    text-align: center;
}
#Container, #Content
{
    height: calc(100% - 50px);
    overflow: auto;
}
#Left, #Right
{
    height: 100%;
}
#Left
{
    float: left;
    background-color: black;
    color: white;
}
#Right
{
    overflow: auto;
}

If the height is not static, I have another solution for you, that I demonstrate here it's not excatly your layout, but it can be done the same way.

Just a detail: "Fotter" should be "Footer"... :-) – MarcoS May 25 '14 at 11:27 — MarcoS, May 25 '14 at 11:27

score 1 · Answer 2 · answered Oct 25 '13 at 15:36

1

See if this example helps you out: http://bootply.com/87811

It basically wraps the columns in a container, sets 100% height, and makes the navbar, sidebar and footer position:fixed

answered Oct 25 '13 at 15:36

Carol Skelly

351,302
90
710
624

But top navigation and footer should be scrollable. It can not be fixed :) – mrzepinski Oct 25 '13 at 15:42

score -1 · Answer 3 · edited May 23 '17 at 11:52

Your problem seems the footer only? (or content height). Set the footer fixed / sticky (http://getbootstrap.com/examples/sticky-footer/) when your content is too small by jquery.

something like:

css from http://getbootstrap.com/examples/sticky-footer/sticky-footer.css:

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
.wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
.footerfixed {
  height: 60px;
  background-color: #f5f5f5;
}

javascript:

 if ($(window).height() > ($('#content').innerHeight() + $('#navigation').innerHeight() + $('#footer').innerHeight() ))
{
    $('#content').addClass('wrap');
    $('#footer').addClass('footerfixed');
}

Their seems no (or see: stackoverflow.com/a/17582746/1596547) pure CSS solution to fix this, see: Sticky header, sticky footer (variable height), fluid middle?

Twitter Bootstrap 3 - max height, custom layout

3 Answers3

Pure CSS Solution (using calc)