Установите высоту DIV, равную высоте другого DIV

У меня есть два DIV, .sidebar и .content, и я хочу установить .sidebar, чтобы сохранить ту же высоту с .content.

Я пробовал следующее:

$(".sidebar").css({'height':($(".content").height()+'px'});

$(".sidebar").height($(".content").height());

var highestCol = Math.max($('.sidebar').height(),$('.content').height());
$('.sidebar').height(highestCol);

Ни один из них не работает. Для .content у меня нет высоты, поскольку будет увеличиваться или уменьшаться в зависимости от содержимого.

Пожалуйста, помогите мне. Сегодня я должен закончить веб-страницу, и эта (простая) вещь дает мне головные боли.

Спасибо!

Ответ 1

Причина, по которой ваш первый пример не работает, - это опечатка:

$(".sidebar").css({'height':($(".content").height()+'px'});

должен быть

$(".sidebar").css({'height':($(".content").height()+'px')});

у вас отсутствует конечная скобка перед селектором .content.

Ответ 2

По моему опыту, очень, очень плохая идея использовать Javascript для такого рода вещей. Веб должен быть семантическим. Это не всегда, но это нужно. Javascript предназначен для интерактивной работы. HTML предназначен для контента. CSS предназначен для дизайна. Вы можете использовать его для других целей, но только потому, что вы МОЖЕТЕ сделать что-то, это не значит, что вы ДОЛЖНЫ.

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

Вот одна из многих веб-страниц, которые показывают, как это сделать:

http://www.alistapart.com/articles/fauxcolumns/

Но прибери его к Javascript для такого рода проблем с презентацией будет "неправильно", даже если он сработает.

Ответ 3

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

В этой статье приведены одинаковые высоты столбца без CSS-хаков.
Ниже приведен метод получения равных высот столбцов с помощью CSS-hack.
и, наконец, если вы хотите использовать javascript/jQuery, вы можете использовать высоту выравнивания script, что jQuery . map ( ) в качестве демонстрации.
```
$.fn.equalizeHeights = function(){
  return this.height( Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get() ) )
}
```
просто используйте его следующим образом:
```
$('.sidebar, .content').equalizeHeights();
```

Ответ 4

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

Получить высоту главного div; Я предполагаю, что это .content div; и назначьте его переменной.

var setHeight = $(".content").height();
то вы можете использовать jQuery для получения боковой панели и назначения высоты содержимого с помощью переменной.

$(".sidebar").height(setHeight);

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

`var setHeight = $(".content").height();`
`$(".sidebar").height(setHeight);`

Вот еще примеры. Задайте высоту div, используя jquery (высота растяжки div).

Ответ 5

Я думаю, что вы ищете faux columns.

Ответ 6

Работает как шарм:

function sidebarHandler() {
  jQuery(".sidebar").css({'height':(jQuery(".content").height()+'px')});
  jQuery(".sidebar").height(jQuery(".content").height());
  var highestCol = Math.max(jQuery('.sidebar').height(),jQuery('.content').height());
  jQuery('.sidebar').height(highestCol);
}

инициализируйте его всеми вашими материалами jQuery:

jQuery(document).ready(function() { 
  sidebarHandler();
});

Ответ 7

$(window).resize(function(){
   var height = $('.child').height();
   $('.parent').height(height);
})

$(window).resize(); //on page load

.parent{
  background:#ccc;
  display:inline-block;
  width:100%;
  min-height:100px;
}
.child{
  background:red;
  width:50%;
  position:absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="child">
  hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute
  </div>
</div>