Как получить высоту контента div

Мой div имеет стиль position:absolute, и в результате он не расширяется, если содержание превышает его высоту.Как получить высоту контента div

Поэтому я думал, что решение будет, если я нахожу, что такое фактическая высота контента, и назначить высоту div с помощью стиля position:absolute.

Любая идея, как это сделать? или, может быть, идея, как сделать absolutediv для расширения в соответствии с его содержанием.

Заранее благодарен!

источник

2013-03-11 kfirba

Имея 'положение: absolute' не допустить его расширения по размеру содержимого, до тех пор, как вы не» t задайте для него определенную высоту. См. Пример: http://jsfiddle.net/zaknotzak/vPMDh/ – zakangelle

Если элементы внутри div являются плавающими, убедитесь, что вы применяете какое-то clearfix – keithhatfield

, можете ли вы добавить скрипку, чтобы мы могли реально взглянуть на ваш Проблема.возможно, больше глаз, просматривая ваш код, увидит, что не так, в первую очередь – Ingo

Вот ужасный способ получить высоту контейнера. Мы в основном клонировать весь DIV, установив положение так, что она имеет высоту, проверяя, что высота, а затем удалить его:

$(function() { 
    var clone = null; 
    alert(clone = $('.test').clone().css('position', 'static').appendTo(".container").height()); 
    clone.remove(); 
});

Вот скрипка: http://jsfiddle.net/vPMDh/1/

источник

2013-03-11 21:40:12 MattDiamant

Мне нравится идея :) спасибо! – kfirba

К сожалению, я достаточно долго страдал от этой проблемы, чтобы понадобиться этот хак. Установка высоты div, равной высоте другого div, но она позиционируется абсолютно. Я всегда искал лучший способ, но еще не нашел его. – MattDiamant

ну, думал часами ... не хотел использовать такое решение, но я просто не могу найти другого – kfirba

Он должен расширяться, даже если он является абсолютным. проверить не имеют высоту: xxpx

если да, то изменить его до минимальной высоты

источник

2013-03-11 21:09:41 monxas

Это странно .. Я проверил его дважды, и все, что у меня есть, - это минимальная высота. divs, которые находятся внутри div, который является его позицией: абсолютный также является позицией: абсолютный, может быть, это причина? – kfirba

использовать clearfix хак. heres the link

и добавьте clearfix вам Див

пример

в таблице стилей

<style> 
.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

.clearfix { 
    display: inline-block; 
} 

html[xmlns] .clearfix { 
    display: block; 
} 

* html .clearfix { 
    height: 1%; 
} 
</style>

... и в вашем DIV добавить clearfix класс

<div class="clearfix"> 
    //some html tags 
</div>

источник

2013-03-11 21:10:39 pixeltracer

Не удалось узнать, как его использовать>. < – kfirba

скопируйте код clearfix в таблицу стилей – pixeltracer

ну тогда это не сработает :( – kfirba

Как вы сказали "it doesn't expand if the content is higher than it's height." Я полагаю, что на нем установлена фиксированная высота. Если вам это нужно, попробуйте вместо этого использовать min-height.

Посмотрите на это fiddle.

источник

2013-03-11 21:19:00 dev

это странно .. Я дважды проверил его , и все, что у меня есть, - это минимальная высота. divs, которые находятся внутри div, которые он занимает: абсолютные, также являются позицией: абсолютная, может быть, это причина? – kfirba

@kfirba yes th у. Посмотрите на эту скрипку http://jsfiddle.net/BZbhK/1/. Вы заметите, что оболочка вокруг div должна показывать синий фон, но не может определить высоту его внутреннего содержимого. Я стараюсь держаться подальше от абсолютного позиционирования (если мне не нужен плавающий div). – dev

<div class="classname"> 

Some content.... 


<p style="clear:both">&nbsp</p> 
</div>

источник

2013-03-11 21:29:40

Спасибо за вклад ваш вопрос. Если вы используете это:

$(document).ready(function(){ 

var x = $("#container").height(); 
alert(x); 

//if not works then 
    var y = $("#container").outerHeight(); 
    alert(y); 

});

Я думаю, что это легко, как чистый код, чтобы найти высоту любого DIV, если вы не применяете высоту DIV тоже.

источник

2013-03-11 22:00:20 Hassaan

Element.scrollHeight должен выполнить эту работу.

источник

2013-07-15 21:20:21 Mohsen

Не работает над Opera 12, например. – Alvaro

аналогичное решение для @MattDiamant, но с ванильным JS и без создания клона:

function getDivHeight(posAbsoluteDiv) { 
    const heightBackup = posAbsoluteDiv.style.height; 

    posAbsoluteDiv.style.height = 'auto'; 

    const contentHeight = posAbsoluteDiv.getBoundingClientRect().height; 

    posAbsoluteDiv.style.height = heightBackup; 

    return contentHeight; 
}

источник

2017-09-13 17:19:12 Bobby

Как получить высоту контента div

ответ

Смежные вопросы