jquery - установка динамической равной высоты плавающего div - PullRequest
Новая
       8

jquery - установка динамической равной высоты плавающего div

1 голос
/ 26 августа 2011

У меня есть 2 контейнера div, одна навигация слева, а другая справа: 

#leftnav_static
{
padding:5px;
margin-top: 5px;
margin-left: 5px;
height: 1000px;
width: 195px;
font-size: 1.35em;
float:left;
background-image: url('pagenav.jpg');
}

#content_dynamic
{
margin-top: 5px;
margin-left: 215px;
height: auto;
width: 700px;
padding: 5px;
background-image: url('pagenav.jpg');
font-size: 1em;
line-height:1.6em;
white-space:nowrap;
}

Теперь я хочу установить leftnav на ту же высоту, что и содержимое (без искусственных столбцов, если это возможно): 

$('#leftnav_static').height($("#content_dynamic").height());

или 

$('#leftnav_static').innerHeight($("#content_dynamic").innerHeight());

не похоже на работу.

есть предложения, почему это так?

Ответы [ 3 ]

2 голосов
/ 26 августа 2011

Это работает. Смотрите это jsfiddle .

Вы запускаете код в готовом блоке jQuery? Кроме того, если вы хотите сохранить это соотношение высоты с помощью изменения размера текста из браузера «масштабирования», вам нужно будет реагировать на события изменения размера. Если в какой-то момент вы сделаете так, чтобы ваш content_dynamic div имел ширину auto, вам также потребуется изменить размер боковой панели div при изменении высоты content_dynamic div (опять же, реагируя на событие resize).

jQuery позволяет только присоединять к событию изменения размера на уровне окна, но есть плагины, которые упрощают его преобразование в событие изменения размера на уровне div.

HTML: 

 <div id="leftnav_static"></div>
 <div id="content_dynamic">Lorem ipsum dolor sit amet, 
   consectetur adipiscing elit. Etiam iaculis ornare 
   sapien sit amet condimentum. Aliquam a diam vel eros
   tristique fermentum vitae at turpis. Etiam fringilla,
   enim nec viverra interdum, metus tortor vehicula mauris,
   in luctus felis massa ut nulla. Proin et leo vel nunc ornare
   pulvinar. Vestibulum quis lectus  vel arcu tristique aliquet.
   Fusce malesuada nisi non ante egestas semper. 
  </div>

CSS: 

#leftnav_static {
    padding:5px;
    margin-top: 5px;
    margin-left: 5px;
    height: 1000px;
    width: 195px;
    font-size: 1.35em;
    float:left;
    background-color: blue;
}

#content_dynamic {
    margin-top: 5px;
    margin-left: 215px;
    height: auto;
    width: 700px;
    padding: 5px;
    background-color: red;
    font-size: 1em;
    line-height:1.6em;
    //white-space:nowrap;  //This makes the content div only one line, 
                           //I commented this out to make the sizing clear.
 }

JavaScript : (при условии, что библиотека jQuery уже загружена) 

$(function() {
    $('#leftnav_static').height($("#content_dynamic").height());
});

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

1 голос
/ 26 августа 2011

Добавить блок отображения в # leftnav_static 

#leftnav_static
{
  display: block;
}

... и это будет работать 

$(document).ready(function() {
    $('#leftnav_static').height( $('#content_dynamic').height() );
});

См. Мой пример;http://jsfiddle.net/D3gTy/

1 голос
/ 26 августа 2011

Вы должны понимать, что вы манипулируете атрибутами CSS. 

var myHeight = $("#content_dynamic").css("height");
$('#leftnav_static').css({"height": myHeight});

должен сделать трюк.

...