jquery - Using jQuery to adjust min-height based on content inside div

Question

I am a total newb to jquery and I want to know how to add a way for jquery to adjust the min-height of a div based on how much content is inside it. I will always want the min-height to probably be around 700, but as users add more content on some pages, it needs to stretch to fit that content.

How do I integrate this? please be specific, in terms of css, html, etc as I am new to jquery.

Answer 1

Too simple:

HTML

<div class="foo" >
This is sample<br />
This is sample<br />
This is sample<br />
This is sample<br />
This is sample<br />
This is sample<br />
This is sample<br />
</div>​

JQuery

$(function() {
    $(".foo").css("min-height", function() {
        return $(this).height();
    });
});

Answer 2

除非我误解了你，否则你不需要在用户添加内容时调整最小高度；具有 min-height 属性的元素将自动增长以适应它们包含的内容。所以你不应该担心它。

例如：如果您min-height: 700px在样式表中应用 css 属性，则在元素内的内容为 500px 的页面上，元素的高度将为 700px；在有 900px 内容的页面上，该元素将是 900px 高。