Как удалить стиль высоты из DIV с помощью jQuery?

85

По умолчанию высота DIV определяется его содержимым.

Но я переопределил это и явно установил высоту с помощью jQuery:

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

Как я могу это изменить? Я хочу удалить стиль высоты и вернуть его к автоматической / естественной высоте?

— Зак Петерсон
источник

1

Я тоже не могу заставить это работать. Кажется, что после того, как вы установили высоту div на что-то конкретное (например, 300 пикселей или что-то еще), вы не можете вернуть высоту автоматически. Возможно, это ошибка jQuery.

— Брэндон Монтгомери

102

убрать высоту:

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

как указал Джон, установите высоту auto:

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

(проверено с помощью jQuery 1.4)

— user268828
источник

6

Вы дали три решения, я могу подтвердить, что установка высоты на "" работает, о других не знаю.

— Дэниел Бердсли

1

В jQuery 1.9 используется '', но nullне используется .

— Стив Таубер,

1

Есть тонкие отличия: 1 + 2 позволяет просматривать первую таблицу (если там что-то определено), 3 отменяет ее (поскольку атрибут, установленный на auto, имеет более высокий приоритет)

— Фрэнк Нок

23

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

Мне нравится использовать это, потому что он симметричен тому, как вы явно использовали .height (val), чтобы установить его в первую очередь, и работает во всех браузерах.

— непрямоугольный
источник

2

Это заставляет высоту быть автоматической высотой, отменяя любые существующие правила CSS. В некоторых конкретных случаях это может быть нормально, но в целом это может вызвать проблемы.

— Bennett McElwee

@BennettMcElwee Я действительно борюсь с проблемой, которую вы сейчас описали. Так что +1 за это.

— Native Coder

19

может что-то вроде

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

— Джон Бокер
источник

2

Это переопределит любые существующие правила CSS, которые должны применяться, что может быть проблемой.

— Bennett McElwee

19

вы можете попробовать это:

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

— щчч
источник

4

это должно быть правильным anwser, поскольку этот удаляет значение стиля css (), это полезно при изменении размера с помощью js :) Ура, спасибо

— Szymon

14

Чтобы сбросить высоту div, просто попробуйте

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

— СвенФинке
источник

Это дубликат ответа @ nonrectangular, который предшествовал этому редактированию.

— Bennett McElwee

3

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

— Рана Нематоллахи
источник

0

просто чтобы добавить к ответам здесь, я использовал высоту как функцию с двумя параметрами: либо укажите высоту, если она меньше, чем высота окна, либо установите ее обратно на авто

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

Мне нужно было центрировать контент по вертикали, если он был меньше, чем высота окна, или пусть он прокручивается естественно, так что это то, что я придумал

— Джон Радделл
источник

0

Спасибо, ребята, что показали все эти примеры. У меня все еще были проблемы с моей контактной страницей на небольших экранах мультимедиа, например, ниже 480 пикселей, после того, как попробовали ваши примеры. Bootstrap продолжал вставлять height: auto.

Element Inspector / Devtools покажет высоту в:

element.style {

}

В моем случае я видел: section#contact.contact-container | 303 x 743в окне браузера.

Итак, следующие полнометражные работы по устранению проблемы:

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

— Томас Кейн
источник

-6

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

— рахул
источник

Я не думаю, что это сработает для стиля высоты css, встроенного в атрибут стиля ...

— topwik 01

Во всяком случае, вы бы хотели removeAttr ("style")

— jigglyT101

Это действительно работает и является лучшим вариантом, если (в отличие от вопроса здесь) вы пытаетесь удалить height="XX"атрибут HTML

— user56reinstatemonica8