2

I know that this is a recurring question but I already looked around and I understand how it's supposed to work, or so I think. Currently I have height:100% for body and min-height: 100% for html. If I'm correct, percentage height should work for the #bigwrap that I have whose immediate parent is body. Following that, I have another div called .container in #bigwrap, however, whenever I increase the height for .container via percentage the height doesn't increase at all. I would like to be able to increase the height freely. This snippet doesn't cover the actual height. I actually have a navigation which comes before the #bigwrap. Another question I have is how does 100% height work if you put it on a div after the navigation, because wouldn't the navigation itself count as part of the body's '100%' height? Also the problem is occurring on both mobile and desktop. That is for mobile it's always the remaining height of the screen, I can't shrink it down to 60% height, for example. 

* {
    margin: 0;
}

body {
    height: 100%;
    background-color: green;
}

html {
    min-height: 100%;
}

#bigwrap {
    position: relative;
    height: 70%;;
}

.container {
    display: flex; //
    position: absolute;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    width: 70%;
    margin: auto; //
    top: 40%; //
    left: 50%; //
    transform: translate(-50%, -50%);
    background-color: white;
}

.left, .middle, .right {
    border-right: 1px solid blue;
}

.left {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: space-around;
    order: 1; //
    background: red;
    flex: 1 20%;
    height: 100%;
}

.left img {
    max-width: 100%;
}

.middle {
    display: flex;
    flex-flow: column wrap;
    order: 2; //
    background: green;
    flex: 2 20%;
    height: 100%;
}

.right {
    text-align: center;
    order: 3; //
    background: yellow;
    flex: 1 20%;
    height: 100%;
}

.right .headbox {
    border-bottom: 1px solid orange;
    margin: auto;
    width: 60%;
    height: auto;
}

.right .list {
    text-align: center;
    margin: auto;
    width: 60%;
    height: auto;
}

.list ul {
    list-style: none;
    padding: 0;
}

.list a {
    text-decoration: none;
    color: inherit;
}

.headbox h3 {
    color: orange;
}

@media all and (max-width: 500px) {
    .container {
        flex-flow: row wrap;
        height: 100%;
    }
    .left img {
        height: 80px;
        width: 80px;
    }
    .left, .right, .middle {
        flex: 1 100%;
    }
    div.logo {
        margin: 0 auto;
        width: 30%;
        height: auto;
        text-align: center;
    }
    * {
        margin: 0;
    }
    #bigwrap {
        position: relative;
        height: 100%;
    }
    .container {
        display: flex; //
        position: absolute;
        position: relative;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        height: 60%;
        width: 70%;
        margin: auto;
        background-color: white;
    }
    .left, .middle, .right {
        border-right: 1px solid blue;
    }
    .left {
        display: flex;
        flex-flow: column wrap;
        align-items: center;
        justify-content: space-around;
        order: 1; //
        background: red;
        flex: 1 20%;
        height: 100%;
    }
    .left img {
        max-width: 100%;
    }
    .middle {
        display: flex;
        flex-flow: column wrap;
        order: 2; //
        background: green;
        flex: 2 20%;
        height: 100%;
    }
    .right {
        text-align: center;
        order: 3;
        flex: 1 20%;
        height: 100%;
    }
    .right .headbox {
        border-bottom: 1px solid orange;
        margin: auto;
        width: 60%;
        height: auto;
    }
    .right .list {
        text-align: center;
        margin: auto;
        width: 60%;
        height: auto;
    }
    .list ul {
        list-style: none;
        padding: 0;
    }
    .list a {
        text-decoration: none;
        color: inherit;
    }
    .headbox h3 {
        color: orange;
    }
    @media all and (max-width: 500px) {
        .box img {
            max-width: 100%;
            margin-bottom: 9%;
        }
        .container {
            flex-flow: row wrap;
            height: 100%;
        }
        .left img {
            height: 80px;
            width: 80px;
        }
        .left, .right, .middle {
            flex: 1 100%;
        }
    }
}
<div id="bigwrap">

    <div class="container">
        <div class="left">
            <img src="cat1.jpeg" alt="Picture of kid" />
            <img src="cat1.jpeg" alt="Picture of kid" />
        </div>
        <div class="middle">
            <div class="box">
                <p>Sample text. Sample text. Sample text. Sample
                    text. Sample text. Sample text. Sample text.
                    Sample text. Sample text. Sample text. Sample
                    text. Sample text. Sample text. Sample text.
                    Sample text. Sample text. Sample text. Sample
                    text.</p>
            </div>
            <div class="box">
                <p>Sample text. Sample text. Sample text. Sample
                    text. Sample text. Sample text. Sample text.
                    Sample text. Sample text. Sample text. Sample
                    text. Sample text. Sample text. Sample text.
                    Sample text. Sample text. Sample text. Sample
                    text.</p>
            </div>
            <div class="box">
                <p>Sample text. Sample text. Sample text. Sample
                    text. Sample text. Sample text. Sample text.
                    Sample text. Sample text. Sample text. Sample
                    text. Sample text. Sample text. Sample text.
                    Sample text. Sample text. Sample text. Sample
                    text.</p>
            </div>
        </div>

        <div class="right">
            <div class="headbox">
                <h3>Visit Us</h3>
            </div>
            <div class="list">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Hours</a></li>
                    <li><a href="#">Plan</a></li>
                    <li><a href="#">Directions</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
Emil Sierżęga
  • 1,785
  • 2
  • 31
  • 38
Shinji-san
  • 971
  • 4
  • 14
  • 31
  • 2
    It won't work with `min-height: 100%` on the root element. It needs to be `html { height: 100% }` ... http://stackoverflow.com/a/31728799/3597276 – Michael Benjamin Jul 23 '16 at 22:28
  • 1
    If you want the body to expand from a minimum height, try `min-height: 100vh`. Then you don't need to worry about setting a height on parent elements. – Michael Benjamin Jul 23 '16 at 22:30
  • Ok it's not working so maybe this is a problem with flexbox. Here's the jsfiddle with min-height: 100vh added. I also added borders around the two divs. On desktop it's not increasing. I want to make this mobile and thought flexbox would be a good idea, so I'd prefer to keep flexbox. https://jsfiddle.net/89x5p0cj/ https://jsfiddle.net/89x5p0cj/ – Shinji-san Jul 23 '16 at 22:55
  • AH I found it. I had the absolute position off of #bigwrap. – Shinji-san Jul 23 '16 at 23:03
  • 1
    Just put the `min-height: 100vh` on the element you want to expand. No need for any `height: 100%`.. https://jsfiddle.net/89x5p0cj/1/ – Michael Benjamin Jul 23 '16 at 23:04
  • Thank you this works. Next trial is fitting these two images on one row -__-. – Shinji-san Jul 23 '16 at 23:15

1 Answers1

1
#bigwrap {
    position: relative;
    height: 70%;; //only need one semi-colon
}

The height has two semi-colons. But it still might not work. So if it doesnt work, try this:

body, html {
   height: 100%;
}

Minimum height and height, or just height needs to be set to 100%.

Cameron
  • 1,049
  • 12
  • 24