使用CSS Trasition时如何更改父div的高度？

Question

I have a problem with a CSS transition. I need to change the height of the parent div relative to the child divs in the transition.

I am using CSS which has a number of steps which slide from right to left as the user clicks continue (Magento onepage checkout with progress bar).

The problem is that the parent container .opc has a height of 970px but the heights of the additional steps vary so I need to find a way to make the parent DIV .opc change height to accommodate the sizes of the remaining steps.

.opc { position:relative; overflow:hidden; height:970px; padding-top:20px; text-align:center; }

I've tried adding height: auto; or height: 100%; but the remaining pages still don't fill the page and I am not sure how to solve it!

Is there a way to affect the height using jQuery or Javascript, maybe pure CSS?

I'm thinking jQuery to detect which step the user is on the adjust the height of the container to fit the content?

<script>
    jQuery(document).ready(function(){

        if('#opc-billing'){
            jQuery('.opc').height(1200);
        }

        if('#opc-shipping'){
            jQuery('.opc').height(500);
        }
    })
</script>

Although the above solution doesn't work :(

Any help would be appreciated guys!

Answer 1

Although it is not a very dynamic function what you have is getting there. Try this:

$(document).ready(function{
    var x = $("#opc-billing").height();
    var y = $("#opc-shipping").height();
    var opc = $(".opc");
    if (x === 600){       // - The number values are just examples of course.
        opc.height(1200);
    }
    if (y === 200){
        opc.height(400);
    } else {opc.height(300);}  // - default height, could be left blank if set by CSS(example - else{})
})

DEMO

Keep in mind that when using the height() method results may be unexpected because height() returns the computed value of an element which does not include padding, border or margin and does not take into account something like when a page is zoomed in. Learn more about height() here . To get total height including padding, border and margins use outerHeight() .

UPDATE: I added some extra bells and whistles to the JSFiddle. Check it out!

Answer 2

Here is a quick demo that might help:

I am simply adding a CSS transition property to the parent as well, and adjusting the height at the same time as the position of the child.

http://jsfiddle.net/qF3u7/

.parent {
    background-color: lightyellow;
    -webkit-transition: height 2s;
    height: 50px;
}

.transit {
    position: relative;
    top: 0;
    width: 50px;
    height: 50px;
    border: 1px solid red;
    -webkit-transition: top 2s;
}

PS: Run this in chrome as I didn't bother with the other browser prefixes for the CSS.