Получите полный рост обрезанного DIV

Как получить высоту div, которая включает обрезанную область div?

<div style="height: 20px; overflow: hidden">
  content<br>content<br>content<br>
  content<br>content<br>content<br>
  content<br>content<br>content<br>
</div>

Ответы

Ответ 1

Ну, вы не можете сделать это таким образом, но это возможно при добавлении внутреннего элемента в ваш контейнер, например:

<div id="element" style="height: 20px; overflow: hidden;">
    <p id="innerElement"> <!-- notice this inner element -->
        content<br />content<br />content<br />
        content<br />content<br />content<br />
        content<br />content<br />content<br />
    </p>
</div>

sidenote: обертывание содержимого внутри абзацев также является хорошей практикой, плюс один дополнительный элемент не дает столько проблем, если они вообще существуют...

И JavaScript:

var innerHeight = document.getElementById('innerElement').offsetHeight;
alert(innerHeight);

P.S. Чтобы этот JavaScript работал, поместите его после своего #element div, потому что обычный JavaScript выполняется до того, как DOM готов, если он не дал этого сделать. Чтобы сделать эту работу, когда DOM готов, проверьте это.

Но я бы предложил получить jQuery, это будет полезно позже, если вы собираетесь расширять операции JavaScript в своем сайт.

Кроме того, jQuery - это власть, для реального!

Таким образом, просто добавьте этот script к вашему <head /> (если вы включили jQuery):

$(document).ready(function() {
 var innerHeight = $('#innerElement').height();
 alert(innerHeight);
});

Пример @jsFiddle с помощью jQuery!

Ответ 2

Это работает во всех случаях, есть ли у вас текст node внутри или в контейнере. Это использование jquery, но вам не нужно.

//return the total height.
totalHeight = $('#elem')[0].scrollHeight;
//return the clipped height.
visibleHeight = $('#elem').height();

$('# elem') [0] возвращает элемент dom из вызова jquery. поэтому вы можете использовать это на любом элементе dom, используя простой ol javascript.

Ответ 3

Вот один из способов добиться того, что вам нужно, используя идею Фабиана:

function GetHeight() {
    var oDiv = document.getElementById("MyDiv");
    var sOriginalOverflow = oDiv.style.overflow;
    var sOriginalHeight = oDiv.style.height;
    oDiv.style.overflow = "";
    oDiv.style.height = "";
    var height = oDiv.offsetHeight;
    oDiv.style.height = sOriginalHeight;
    oDiv.style.overflow = sOriginalOverflow;
    alert("Real height is " + height);
}

Живая демонстрация и тестовый пример: http://jsfiddle.net/yahavbr/7Lbz9/

Ответ 4

То не возможно афайк. Вы можете попробовать удалить этот стиль и установить его с помощью javascript после того, как вы получите высоту. Не самое изящное решение, но я считаю его единственным.