Make the BODY DIV Fill the Available Area

Question

I'm working on a brand new website and I'm trying to just get the basic layout going. I am using the ASP.NET MVC 4 generated HTML and I would like to get the DIV named body to fill the available space after making room for the header and thus anchoring the footer to the bottom of the browser window. However, what I'm getting right now is three panels just stacked on top of each other.

I would like a solution that would work if the browser supported HTML5 and one if it didn't

Please note I've inlined comments in the CSS to try and explain what I've tried.

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - Title</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
    </head>
    <body>
        <header>
            <div class="content-wrapper">
                <div class="float-left">
                    <p class="site-title">@Html.ActionLink("Title", "Index", "Home")</p>
                </div>
            </div>
        </header>
        <div id="body">
            @RenderSection("featured", required: false)
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
        </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; @DateTime.Now.Year - ACME. All rights reserved.</p>
                </div>
                <div class="float-right">
                    <ul id="social">
                        <li><a href="http://facebook.com" class="facebook">Facebook</a></li>
                        <li><a href="http://twitter.com" class="twitter">Twitter</a></li>
                    </ul>
                </div>
            </div>
        </footer>

        @RenderSection("scripts", required: false)
    </body>
</html>

CSS

body {
    /* I'VE TRIED BOTH OF THE FOLLOWING TO SEE IF THE BODY ITSELF WOULD SPAN */
    /* WITH NO OTHER CSS APPLIED TO THE body ELEMENT */

    /*height: fill-available;*/
    /*height: 100%*/
}

/* general layout
----------------------------------------------------------*/
.float-left {
    float: left;
}

.float-right {
    float: right;
}

.clear-fix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

/* main layout
----------------------------------------------------------*/
.content-wrapper {
    margin: 0 auto;
    max-width: 960px;
}

#body {
    background-color: #efeeef;
    clear: both;
    padding-bottom: 35px;

    /* I'VE TRIED BOTH OF THE FOLLOWING TO SEE IF I COULD GET THIS ELEMENT TO SPAN */
    /* WITHOUT ANY OTHER CSS APPLIED TO THE body TAG */

    /*height: fill-available;*/
    /*height: 100%*/
}

.main-content {
    /*background: url("../Images/accent.png") no-repeat;*/
    padding-left: 10px;
    padding-top: 30px;
}

.featured + .main-content {
    /*background: url("../Images/heroAccent.png") no-repeat;*/
}

footer {
    clear: both;
    background-color: #e2e2e2;
    font-size: .8em;
    height: 100px;
}

/* site title
----------------------------------------------------------*/
.site-title {
    color: #c8c8c8;
    font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
    font-size: 2.3em;
    margin: 20px 0;
}

    .site-title a, .site-title a:hover, .site-title a:active {
        background: none;
        color: #c8c8c8;
        outline: none;
        text-decoration: none;
    }

/* social
----------------------------------------------------------*/
ul#social li {
    display: inline;
    list-style: none;
}

    ul#social li a {
        color: #999;
        text-decoration: none;
    }

a.facebook, a.twitter {
    display: block;
    float: left;
    height: 24px;
    padding-left: 17px;
    text-indent: -9999px;
    width: 16px;
}

a.facebook {
    background: url("../Images/facebook.png") no-repeat;
}

a.twitter {
    background: url("../Images/twitter.png") no-repeat;
}

Nothing wrong with having a DIV with an ID of 'body' as long as you don't get it mixed up with the actual 'body' tag of the page. With regards to your question you could use javascript to calculate the height of the users screen then remove the height of the HEADER and the FOOTER from that. — Billy Moat, Aug 10 '12 at 22:22
@BillyMoat - is JavaScript the only way? I mean I can go that route but I really didn't want to (insert sad face here). — Mike Perrenoud, Aug 13 '12 at 12:13
@Mike - Yeah, I reckon it's probably the only way to do what you're trying to do I'm afraid. I may be wrong, but I don't think so. — Billy Moat, Aug 13 '12 at 13:38
Maybe you should try out the answers and mark the better one as solving. — danijar, Aug 14 '12 at 14:58
@sharethis - I'll be able to try the answers in a couple of days. Thanks for the bump. — Mike Perrenoud, Aug 14 '12 at 15:00

danijar · Accepted Answer · 2012-08-10T22:36:08.397

Just snap the header and footer at the bottom of the page using fixed positioning.

header, footer{ position:fixed; left:0; right:0; z-index:1; }
header{ top:0; }
footer{ bottom:0; }

Then you can give your body the background your div#body had before. The div gets no background and will expand as much as needed.

div#body{ background:none; }
body{ background:#eee; }

This will look like the div would fill the remaining space of the page. Finally give your header and footer a background so that you can't see the background of the body under it.

header, footer{ background:#fff; }

By the way I would suggest removing body margins. body{ margin:0; }

score 0 · Answer 2 · answered Aug 11 '12 at 00:07

0

I believe it's a bit impossible to do that with just CSS. You can make a webpage with 100% height like this:

html{
    height: 100%;
}

body{
    height: 100%;
}

#body{
    height: 100%;
}

And then for header, body and footer you can do like this:

header{
  height: 100px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  background-color: #f00;
}

#body{
  bottom: 100px;
  left: 0;
  position: absolute;
  right: 0;
  top: 100px;
  background-color: #fff;
}

footer{
  bottom: 0;
  height: 100px;
  left: 0;
  position: absolute;
  width: 100%;
  background-color: #ff0;
}

It might work for a bit, but it'll break at some point. When you resize your browser, it'll be running out of room for your #body. If you want a better solution, you should use javascript. In your javascript, calculate how much space you have for your #body, then either adjust the height of header and footer. Or adjust the #body instead.

answered Aug 11 '12 at 00:07

Zendy

1,664
1
17
24

Can't you give footer and header a procenutal height? – danijar Aug 12 '12 at 15:59
I believe you can. Just change those measurement in pixel to percentage. – Zendy Aug 12 '12 at 23:49
Yes, I realize it now. But I'm not sure if that method using percentage will be best though. It might work in some browsers, but maybe not all. If it's me, most likely I'd go with jQuery..what do you think? – Zendy Aug 14 '12 at 00:26
I think that jQuery is a JS framework and it is much more common that an user disabled JS instead of using an ancient browser which doesn't support percentages. Or use simply my answer which doesn't use height spezifications. Of course at very small resolutions the main area could disappear but you logically can't solve this without providing a responsible markup. And this is my advice for you, Mike, if you need to support very small resolutions. – danijar Aug 14 '12 at 14:56

Make the BODY DIV Fill the Available Area

HTML

CSS

2 Answers2

Linked