How do you transition a height without the element going outside the parents border?

Question

I am trying to make a transition that starts with everything at the top and after the page loads, the content slowly expands down the page.

I've gotten most of it working, except when the content expands down the page, it keeps expanding way outside it's parents borders. I have all the elements set to expand to 100%, so I thought the expanding elements would only expand to 100% of its parents size, but it just keeps going down the page.

Perhaps I am just misunderstanding how the parent/child height percentages work. Can anyone point out what I am doing wrong? Thanks.

Here is a link to the code on jsfiddle

Here is the HTML code:

<body>
    <div id="outer">
        <div class="middle">
            <div class="inner">
                 <h3>A-B</h3>

                <ul>
                    <li>A</li>
                    <li>B</li>
                </ul>
            </div>
            <div class="inner">
                 <h3>C-G</h3>

                <ul>
                    <li>C</li>
                    <li>D</li>
                    <li>E</li>
                    <li>F</li>
                    <li>G</li>
                </ul>
            </div>
            <div class="inner">
                 <h3>H</h3>

                <ul>
                    <li>H</li>
                </ul>
            </div>
        </div>
    </div>
</body>

Here is the javascript code:

window.onload = function () {
    document.getElementById("outer").setAttribute("class", "loaded");
}

Here is the CSS:

html {
    height: 100%;
}
body {
    height: 100%;
}
#outer {
    height: 100%;
}
.middle {
    border: solid 2px black;
    height: 100%;
}
.inner {
    height: 0%;
    transition: height 5s 2s;
    -moz-transition: height 5s 2s;
    -webkit-transition: height 5s 2s;
    -o-transition: height 5s 2s;
}
#outer.loaded .inner {
    height: 100%;
}

percentages are based on the parent. You are setting three divs with class .inner to height 100%. which means the total height is 300%. Set the .inner to 33% would be more reasonable — OJay, Mar 10 '14 at 01:02
I thought when everything was set to 100%, they would divide the space equally. I guess it doesn't work like that. — Lucas, Mar 10 '14 at 01:05
Is there a way to make them auto split and transition smoothly? I tried setting auto, but it goes from the top and jumps straight to full expansion. — Lucas, Mar 10 '14 at 01:06
Only way I can think would be to get javascript involved, to work out the heights and set them as percentages, and then fire the CSS transition — OJay, Mar 10 '14 at 01:07

score 2 · Accepted Answer · edited May 23 '17 at 11:57

percentages are based on the parent. You are setting three divs with class .inner to height 100%. which means the total height is 300%. Set the .inner to 33% would be more reasonable.

EDIT

Just out of interest, found another article on here on SO that might help you with what you are trying to do, which is transition height 0 to transition height auto, which actually involves setting the max-height to a number really big (well at least bigger than its auto height), so only transitions to the auto anyway. Link here

How do you transition a height without the element going outside the parents border?

1 Answers1