CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Douglas Timms
Douglas Timms

Reputation: 694

Display:flex or height:auto not working

Why doesn't a div that has the style of display:flex or height:auto extend the div to the bottom of the page? Especially when the parent divs are set to height:100%?

I am providing a very specific example to demonstrate this:

http://jsfiddle.net/p1fxh128/1/

<div style="height:100vh">
  <section style="height:100vh">
        Welcome...red div below should fill entire container        

            <section style="display:flex; flex-direction: column; background:red; height: auto">
              <header>
                Red Header Here...
              </header>
              <div>
                Red Body here...
              </div>
              <footer>
                Red Footer here...
              </footer>
            </section>

        Random stuff below should still be displayed

    </section>
</div>

Notice the red div in this example. Why is it not filling the grid vertically?

Upvotes: 0

Views: 5148

Answers (2)

Paulie_D
Paulie_D

Reputation: 115046

I assume that you mean that the red section should take the remainder of the page not be 100% of the page itself.

That being the case.

* {
    -webkit-background-origin:;
    background-origin:;
    margin: 0;
}
.wrap {
    height:100vh;
}
.wrap > section {
    height:100vh;
    display:flex;
    flex-direction: column;
}
.wrap > section > section {
    background:red;
    flex:1;
}
<div class="wrap">
    <section>Welcome...red div below should fill entire container
        <section>
            <header>Red Header Here...</header>
            <div>Red Body here...</div>
            <footer>Red Footer here...</footer>
        </section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit perferendis fugit, ducimus veniam voluptates debitis. Voluptas, recusandae impedit numquam obcaecati accusamus consequuntur, illo fuga ea enim quod facere, repellat tempore!</section>
</div>

Upvotes: 1

lbispo
lbispo

Reputation: 1

"Notice the red div in this example." I'm assuming by this you mean the section with the red background.

Here's my fork of your jsfiddle:

http://jsfiddle.net/lbispo/3u5rkysk/

I removed your inline styles and added this:

html, body, body > div, body > div > section { height: 100%; }
body > div > section { display: flex; flex-direction: column; }
body > div > section > section { flex: 1; background-color: red; }

The selectors would be simpler with the ids and classes you had in your previous example. height: 100% added to html and body, and changed selectors for the flexbox, adding flex: 1 to the stretchy element.

Hope this helps. My first answer!

Upvotes: 0

Related Questions