flexible height for div?

Question

I have a container div that need to be flexible in height because the content inside the div can change when users click on the button.

<div id="container">
        <div id="divBuyNow">
            <button id="btnBuyNow">
                Buy Now</button>
        </div>
</div>

$("#btnBuyNow").click(function () {

                $("#divBuyNow").animate({
                    opacity: 0,
                    marginRight: '200px'
                }, 1000, function () {
                    $("#divBuyNow").hide();
                });


                $("#platformsContainer").animate({
                    opacity: 1,
                    marginRight: '170px'
                }, 2000);
            });

Answer 1

如果您没有弄乱样式，并且没有为该div设置高度，它会很灵活;-)（从上面的代码中我似乎看到您的按钮一直存在，而您只是将其隐藏...）

Answer 2

A div tag by default will be flexible in height and width(it adjusts itself according to the content placed inside it). You should be fine as long as you do not set the height and width css properties explicitly.
Just a note : In case of nested divs just be sure that you do not set the height and width property of the inner div. If you do so the outer div becomes inflexible ie it will have the dimensions of the child div.

Answer 3

What I understand is you want to animate platformContainer to height based on the content. If yes, set overflow:hidden to container and modify contents to innerDiv inside the container with opacity:0 . When you want to show, get the height of innerDiv and animate container div to height + margins and other offset.