jQuery -设置div的最小高度

时间:2022-05-02 20:30:01

This is probably really easy for most of you. But I'm in need of a small snippet that looks up the current height of a div (the div has a dynamic height based on the content inside it) and then set that value in the css class's min-height value.

这对你们大多数人来说很容易。但是我需要一个小片段来查找div的当前高度(div根据其内部的内容有一个动态高度),然后在css类的min-height值中设置该值。

Basically what this means is that I want this container to have it's min-height to be the exact same value as it's current height. This is probably a quick one :)

基本上这意味着我想让这个容器的最小高度和当前高度相等。这可能是一个快速的例子:)

3 个解决方案

#1


6  

just a proof of concept!

只是概念的证明!

     // attend for dom ready
    $(function() {
        // hide .foo before we get it's height
        $('.foo').hide();
        // get the height, also the one mentioned below is a good one!
        var foo_height = $('.foo').height();
        // see if the actual height respect our needs! esample 180px
        if ( foo_height > 180 ) {
            // set the height and show it!
            //$('.foo').css('height', foo_height + 'px').show(); OR try
            $('.foo').height( foo_height ).show();
        } else {
            //do something else here
            }
});

this should work as expected!

这应该像预期的那样工作!

#2


69  

If I understand you correctly, you could do the following:

如果我理解正确,你可以做以下事情:

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

#3


1  

var elt = document.getElementById("<%= this.your_element_id.ClientID %>");
elt.style.minHeight = elt.clientHeight + 'px';

#1


6  

just a proof of concept!

只是概念的证明!

     // attend for dom ready
    $(function() {
        // hide .foo before we get it's height
        $('.foo').hide();
        // get the height, also the one mentioned below is a good one!
        var foo_height = $('.foo').height();
        // see if the actual height respect our needs! esample 180px
        if ( foo_height > 180 ) {
            // set the height and show it!
            //$('.foo').css('height', foo_height + 'px').show(); OR try
            $('.foo').height( foo_height ).show();
        } else {
            //do something else here
            }
});

this should work as expected!

这应该像预期的那样工作!

#2


69  

If I understand you correctly, you could do the following:

如果我理解正确,你可以做以下事情:

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

#3


1  

var elt = document.getElementById("<%= this.your_element_id.ClientID %>");
elt.style.minHeight = elt.clientHeight + 'px';