Login/Register
Bootstrap - Fill fluid container between header and footer
Asked Answered
Solved htmlcsstwitter-bootstrapfluid-layout
F

1

18

This may be a very simple question, but I've been out of the CSS scene for awhile and I can't seem to figure it out. I am using the Bootstrap framework and I have a fixed header and footer. The container in between includes a navbar and content area. I would like that container to fill the entire space (100% height) in between the header and footer.

Here is jsFiddle of the project: http://jsfiddle.net/NyXkt/2/

This is the current html structure:

<div id="wrapper">
    <!-- Header -->
    <div class="container-fluid no-padding header">
        <div class="row-fluid fill-height">
            <!-- Header Left -->
            <div class="span2">
                <p class="center-text">Left</p>
            </div>
            <!-- Header Middle -->
            <div class="span8">
                <p class="center-text">Middle</p>
            </div>
            <!-- Header Right -->
            <div class="span2">
                <p class="center-text">Right</p>
            </div>
        </div>
    </div>
    <!-- Content Wrapper -->
    <div class="container-fluid no-padding fill">
        <div class="row-fluid">
            <div class="span2">
                <div class="well sidebar-nav-fixed no-padding">
                    <ul id="nav">
                        <li><a href="#">Item 1</a>

                            <ul>
                                <li><a href="#">Sub-Item 1 a</a>
                                </li>
                                <li><a href="#">Sub-Item 1 b</a>
                                </li>
                                <li><a href="#">Sub-Item 1 c</a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Item 2</a>

                            <ul>
                                <li><a href="#">Sub-Item 2 a</a>
                                </li>
                                <li><a href="#">Sub-Item 2 b</a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Item 3</a>

                            <ul>
                                <li><a href="#">Sub-Item 3 a</a>
                                </li>
                                <li><a href="#">Sub-Item 3 b</a>
                                </li>
                                <li><a href="#">Sub-Item 3 c</a>
                                </li>
                                <li><a href="#">Sub-Item 3 d</a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Item 4</a>

                            <ul>
                                <li><a href="#">Sub-Item 4 a</a>
                                </li>
                                <li><a href="#">Sub-Item 4 b</a>
                                </li>
                                <li><a href="#">Sub-Item 4 c</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="span10">
                <p class="center-text">Content</p>
            </div>
        </div>
    </div>
</div>
<!-- Footer -->
<div id="footer">
    <div class="container-fluid">
        <p class="center-text">Footer</p>
    </div>
</div>

If anyone could explain what I may need to do, or point me to an example, I'd appreciate it.

Fullgrown answered 26/3, 2013 at 15:36 Comment(1)
Hi, [bootstrap] tag it's not for the CSS framework, you should use [twitter-bootstrap] instead. – Gladiatorial
S
35

Bootstrap 4 (update 2019)

Now it's easier to get this layout using flexbox.

<body class="d-flex flex-column">
    <header>
    </header>
    <main class="container-fluid flex-fill">
    </main>
    <footer>
    </footer>
</body>

body {
   min-height:100vh;
}

.flex-fill {
   flex:1 1 auto;
}

Demo

Note: The flex-fill utility class will be included in the next Bootstrap 4.1 release. So after that release the extra CSS for flex-fill won't be needed.

Bootstrap 2 (original 2013 answer)

Any parent containers also have to be 100% height (html,body and #wrapper). If you make #wrapper {height:100%} and add 'fill-height' to your container it should work. See here:

http://jsfiddle.net/skelly/NyXkt/4/

#wrapper {
    min-height: 100% !important;
    height: 100% !important;
    margin: 0 auto -33px;
}
Synthiasyntonic answered 26/3, 2013 at 17:21 Comment(6)
This example always seems to have a scrollbar, even if the content is not that big, is that because of the footer? – Upheld
Were you ever able to solve the issue with the scrollbar always showing? – Lavona
body {overflow:hidden} would fix that, but I'm not sure if that is what you're going for. – Synthiasyntonic
This examples makes entire page scrollable, but would be great to have only the inside in <main> being scrollable. – Tripartite
Works responsively, simple and clean code. Great answer! – Maybellemayberry
Thx, this helped me. Nevertheless I still need the extra css with version 4.3. – Leveret

© 2022 - 2024 — McMap. All rights reserved.