Как я могу получить ИСТИННУЮ высоту div? - PullRequest
Новая
       20

Как я могу получить ИСТИННУЮ высоту div?

2 голосов
/ 04 августа 2009

Я пытаюсь определить высоту div. Это звучит просто, но усложняется тем фактом, что плавают только его потомки, поэтому запрос высоты / externalHeight (с использованием jQuery) / clientHeight / offsetHeight возвращает только 0, хотя ясно, что на странице он отображается с высоты. Вот пример структуры HTML: 

<div id="root">
   <div class="header"></div>
   <div class="body">
      <div class="text-left" id="text-one">
         <p>Some text taking up multiple lines</p>
      </div>
      <div class="text-right" id="text-two">
         <p>Other text</p>
      </div>
   </div>
</div>

Элементы text-left и text-right имеют float: left; и "плавать: правильно;" на них, поэтому, когда я спрашиваю высоту «корня», он говорит, что это 0. Однако, конечно, когда я получаю высоту «текст-один» и «текст-два», он правильно говорит мне, что сейчас 20 или что-то еще.

Как я могу определить РЕАЛЬНУЮ высоту "корневого" элемента? (Например, если бы «text-one» имел высоту 50, а «text-two» имел высоту 20, он знал бы, что истинная высота равна 50)

Я полагаю, что есть какая-то логика, позволяющая рассчитать высоту всех элементов-потомков, вычислить, плавают ли они и т.д. 1008 *

Заранее спасибо.

РЕДАКТИРОВАТЬ. Обратите внимание, что изменение HTML-кода (например, «очистить») невозможно. Мне нужно знать высоту этого div, как есть.

Ответы [ 6 ]

7 голосов
/ 04 августа 2009

Это потому, что высота равна нулю. Попробуйте просмотреть это 

<html><head><title>test</title></head><body>

<div id="root" style="border:1px solid red">
   <div class="header"></div>
   <div class="body">
      <div class="text-left" id="text-one" style="float: left;">
         <p>Some text taking up multiple lines</p>
      </div>
      <div class="text-right" id="text-two" style="float: right;">
         <p>Other text</p>
      </div>
   </div>
</div></body>

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

Также по тем же соображениям элемент body имеет нулевую высоту; что вы можете проверить, добавив <body style="border:1px solid blue">

3 голосов
/ 04 августа 2009

Если все дочерние элементы # root (строго говоря, потомки) являются плавающими, то это действительно имеет высоту ноль. Попробуйте установить для него цвет фона, чтобы доказать, что он не занимает вертикальное пространство.

Если вы получите высоты двух плавающих элементов, то вы можете взять большее из них: 

var height = Math.max(leftHeight, rightHeight);
1 голос
/ 04 августа 2009

Я удалил ответ, потому что пропустил то, на что уже указали многие другие: высота буквально равна 0, и все работает. То, что вам нужно сделать, чтобы получить высоту, которая, по вашим словам, у корневого элемента div «кажется», должна сделать так, чтобы div на самом деле имел такую ​​высоту, которую можно легко достичь, просто очистив поплавки в конце дел. 

<div id="root">
   <div class="header"></div>
   <div class="body">
      <div class="text-left" id="text-one">
         <p>Some text taking up multiple lines</p>
      </div>
      <div class="text-right" id="text-two">
         <p>Other text</p>
      </div>
   </div>
   <div style="clear: both;"></div>
</div>
1 голос
/ 04 августа 2009

Как насчет функции, которая читает все внутренние div и сохраняет максимальное значение высоты из двух div?

Я не думаю, что это очень правильно, но вот попробуй: 

var max_height = 0;
$.each( $('#root div'), function(x, y){
    var yHeight = $(y).height();
    max_height = ( yHeight > max_height) ? yHeight : max_height;
});
console.log(max_height); //should have the height value.

Рабочая демоверсия

0 голосов
/ 04 августа 2009

Как частично упомянуто выше, проблема здесь является проблемой css, а именно очисткой плавающих элементов. Отличный обзор которого можно найти на www.positioniseverything.net / easyclearing.html . Поскольку вы не можете изменить разметку html, вы можете взять решение positioniseverthing и применить его, добавив класс к родителю плавающих элементов с помощью js / jQuery, 

$('#root .body').addClass('clearfix');

Теперь вы сможете получить доступ к высоте с помощью 

$('#root').height();

как упомянуто выше. Надеюсь, это поможет

0 голосов
/ 04 августа 2009

Установите переполнение корневого элемента на скрытый , тогда его высота будет растягиваться, чтобы соответствовать внутренним элементам. Протестировано по ссылке, которую вы разместили в другом комментарии, и это работает! 

#root {
  background-color: lightgreen; /* for demo purposes */
  overflow: hidden;
}

Если использование файла CSS не является опцией, то вы можете использовать jQuery для установки CSS: 

$('#root').css( 'overflow', 'hidden' );
// ...then your height code
...