CODEWITHSUNDEEP
htmltwitter-bootstraptwitter-bootstrap-3
MyFantasy512
MyFantasy512

Reputation: 688

Bootstrap grid, content height fill

I wonder how can I achieve in Bootstrap 3-row grid layout, with content row fills screen size ( and header and footer are fixed height ).

Here is an image what I am trying to achieve:

screenshot

Upvotes: 1

Views: 1673

Answers (1)

Charles Ingalls
Charles Ingalls

Reputation: 4561

I would nest the header and footer within a content div and set this content div to 100% height with a top and bottom padding that equals the height of the header/footer.

Example 1: http://jsfiddle.net/52VtD/6841/

Example 2 (with Bootstrap columns): http://jsfiddle.net/52VtD/6842/

Example 3 (with scrollable inner container): http://jsfiddle.net/52VtD/6843/

HTML

html, body {
    height: 100%;
}

.content {
    height: 100%;
    position: relative;
    padding: 40px 0;
    background: yellow;
}

.header {
    width: 100%;
    height: 40px;
    position: fixed;
    top: 0;
    background: black;
}

.footer {
    width: 100%;
    height: 40px;
    position: fixed;
    bottom: 0;
    background: black;
}

Upvotes: 1

Related Questions