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:

Accepted Answer

Must Read

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.

Answer 2

See if this example helps you out:

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

Answer 3

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

something like:

css from :

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: ) pure CSS solution to fix this, see: Sticky header, sticky footer (variable height), fluid middle?

Twitter Bootstrap 3 - Max Height, Custom Layout

3 Answers

Must Read

Pure CSS Solution (using calc)

Sarah Jenkins