CODEWITHSUNDEEP
htmlcssflexbox
Nicholas Pappas
Nicholas Pappas

Reputation: 10624

Colored Background Stops at Bottom of Page, Not Content, Using Flex Layout

I have a layout in which the background color extends to the height of the browser, but not the height of the content.

Starting with this JSFiddle: http://fiddle.jshell.net/EvilClosetMonkey/g2Hmf/

I get a layout in the image below. The height of the 3-columns is the browser (or frame, in the case of JSFiddle), plus the height of the "header" row, plus the height of the "breadcrumb" row. This results in a little bit of scroll, but not much.

enter image description here

In this case the contents do not fill the full height, but I still wish the color to reach the bottom of the browser space. The trouble comes up if I add content to one of the columns. In this case, the background color still stops where it did before, but the content continues!

JSFiddle: http://fiddle.jshell.net/EvilClosetMonkey/g2Hmf/1/

enter image description here

How can I get my background color to consume the height of content, when it reaches past the browser height, not just the browser height?

Variations of height: 100% on the columns have not yielded success. I've also tried putting all contents into the flex layout (not just the columns), but that did not create any different results.

HTML and CSS blocks below, for reference without visiting JSFiddle:

<div id="header">Header</div>
<div id="crumbs">Breadcrumb</div>
<div id="content">
    <div id="navigation">Nav</div>
    <div id="workspace">Contents</div>
    <div id="inspector">Info</div>
</div>

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

#header {
    background-color: red;
}

#crumbs {
    background-color: blue;
}

#navigation {
    background-color: green;

    -webkit-box-flex: 0 0 240px;
    -moz-box-flex: 0 0 240px;
    -webkit-flex: 0 0 240px;
    -ms-flex: 0 0 240px;
    flex: 0 0 240px;
}

#workspace {
    background-color: orange;

    -webkit-box-flex: 1 1 auto;
    -moz-box-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

#inspector {
    background-color: yellow;

    -webkit-box-flex: 0 0 240px;
    -moz-box-flex: 0 0 240px;
    -webkit-flex: 0 0 240px;
    -ms-flex: 0 0 240px;
    flex: 0 0 240px;
}

#content {
    height: 100%;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

Upvotes: 0

Views: 1268

Answers (2)

lehi_net
lehi_net

Reputation: 524

What about this? http://fiddle.jshell.net/g2Hmf/4/

This fix uses #header and #crumbs height and margin-top for #content.

I also added #wrapper.

Upvotes: 0

huseyin tugrul buyukisik
huseyin tugrul buyukisik

Reputation: 11920

Just remove height:100% from body :) so it expands to all available space instead of expanding to only 100% of visible screen. Maybe that 100% thing is for divs and tables. Body is already everywhere. But limiting it to 100% of visible screen can be useful for some other sites.

Above is for the second link you gave in your question.

Upvotes: 1

Related Questions