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

StackOverflow https://stackoverflow.com/questions/22290391

Вопрос

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.

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top