কীভাবে আমি jQuery ব্যবহার করে ডিআইভি থেকে উচ্চতা শৈলীটি সরিয়ে ফেলব?

Question

ডিফল্টরূপে, একটি ডিআইভির উচ্চতা এর বিষয়বস্তু দ্বারা নির্ধারিত হয়।

তবে, আমি এটিকে ওভাররাইড করে এবং স্পষ্টভাবে jQuery এর সাথে একটি উচ্চতা সেট করেছি:

$('div#someDiv').height(someNumberOfPixels);

আমি কীভাবে এর বিপরীত হতে পারি? আমি উচ্চতার শৈলীটি সরাতে এবং এটিকে স্বয়ংক্রিয় / প্রাকৃতিক উচ্চতায় ফিরিয়ে আনতে চাই?

Comments

আমি এটি কাজ করতে পারি না। দেখে মনে হচ্ছে আপনি ডিভের উচ্চতা নির্দিষ্ট কিছু (যেমন 300px বা যাই হোক না কেন) সেট করার পরে আপনি উচ্চতায় পিছনে অটোতে সেট করতে পারবেন না। একটি jQuery বাগ হতে পারে।

— ব্র্যান্ডন মন্টগোমেরি

Answer 1

উচ্চতা অপসারণ:

$('div#someDiv').css('height', '');
$('div#someDiv').css('height', null);

like John pointed out, set height to auto:

$('div#someDiv').css('height', 'auto');

(checked with jQuery 1.4)

Comments

You gave three solutions, I can confirm setting height to "" works, don't know about the others.

— Daniel Beardsley

In jQuery 1.9 using '' but using null does not.

— Steve Tauber

There are subtle differces: 1+2 lets revices thew stlyesheet (if anything is defined there), 3 overrides it (as the attrib set to auto has higher precedence)

— Frank Nocke

Answer 2

$('div#someDiv').height('auto');

I like using this, because it's symmetric with how you explicitly used .height(val) to set it in the first place, and works across browsers.

Comments

This forces the height to be the auto height, overriding any existing CSS rules. That may be OK in some specific instances, but in general it could cause problems.

— Bennett McElwee

@BennettMcElwee I'm actually struggling with the issue you described now. So +1 for that.

— Native Coder

Answer 3

you can try this:

$('div#someDiv').height('');

Comments

that should be correct anwser as this one removes css() style value, it is usefull on resizing with js :) Cheers, thanks

— Szymon

Answer 4

maybe something like

$('div#someDiv').css("height", "auto");

Comments

That will override any existing CSS rules that should apply, which may be a problem.

— Bennett McElwee

Answer 5

To reset the height of the div, just try

$("#someDiv").height('auto');

Comments

This is a duplicate of @nonrectangular's answer, which predates this edit.

— Bennett McElwee

Answer 6

$('div#someDiv').css('height', '');

Answer 7

just to add to the answers here, I was using the height as a function with two options either specify the height if it is less than the window height, or set it back to auto

var windowHeight = $(window).height();
$('div#someDiv').height(function(){
    if ($(this).height() < windowHeight)
        return windowHeight;
    return 'auto';
});

I needed to center the content vertically if it was smaller than the window height or else let it scroll naturally so this is what I came up with

Answer 8

Thank guys for showing all those examples. I was still having trouble with my contact page on small media screens like below 480px after trying your examples. Bootstrap kept inserting height: auto.

Element Inspector / Devtools will show the height in:

element.style {

}

In my case I was seeing: section#contact.contact-container | 303 x 743 in the browser window.

So the following full-length works to eliminate the issue:

$('section#contact.contact-container').height('');

Answer 9

$('div#someDiv').removeAttr("height");

Comments

i don't think this will work for a css height style that is embedded within a a style attribute...

— topwik

If anything, you'd want to removeAttr("style")

— jigglyT101

This does work and is the best option however if (unlike the question here) you're trying to remove a height="XX" HTML attribute

— user56reinstatemonica8