5

Есть контейнер, а в нем 3 блока с разной высотой. Высота блока зависит от контента.

Как задать всем блокам высоту, как у самого низкого из них?

jsfiddle

.wrapper{
  width:600px;
  height:200px;
  background:lightgrey;
}
.item{
  width:200px;
  float:left;
}
.item:nth-child(1){
  background:red;
}
.item:nth-child(2){
  background:green;
}
.item:nth-child(3){
  background:blue;
}
<div class="wrapper">
  <div class="item">content content content content content content content content content content content content content content content content content content content content content content content content</div>
  <div class="item">content content contentcontent content contentcontent content content</div>
  <div class="item">content content contentcontent content contentcontent content contentcontent content contentcontent content content</div>
</div>

3
  • 1
    А как ты им задашь высоту как меньшему из них, если в них не будет влезать текст? 8 авг 2018 в 9:26
  • overflow: scroll; Там будет разный контент(не только текст).
    – Ruslan
    8 авг 2018 в 9:30
  • 1
    "Самого низкого" - самого низко расположенного(красного) или самого короткого(зеленого)?
    – kizoso
    8 авг 2018 в 9:51

3 ответа 3

6

$(document).ready(function() {
    var allDivs = $('.item');
    var dvSmallest = allDivs[0];
    $(allDivs).each(function() {
        if ($(this).height() < $(dvSmallest).height()) 
            dvSmallest = $(this);
    });
    $('.item').height(dvSmallest.height());
});
.wrapper{
  width:620px;
  height:200px;
  background:lightgrey;
}
.item{
  width:200px;
  float:left;
  overflow:auto;
}
.item:nth-child(1){
  background:red;
}
.item:nth-child(2){
  background:green;
}
.item:nth-child(3){
  background:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="item">content content content content content content content content content content content content content content content content content content content content content content content content</div>
  <div class="item">content content contentcontent content contentcontent content content</div>
  <div class="item">content content contentcontent content contentcontent content contentcontent content contentcontent content c324ontent</div>
</div>

Как-то так

7
  • 3
    а высоты у всех разные - что-то Ваш скрипт не алё 8 авг 2018 в 9:59
  • 1
    Немного подправил код, так лучше?
    – Nilsan
    8 авг 2018 в 10:11
  • лучше, определённо :) 8 авг 2018 в 10:13
  • Что-то еще не выполняет вашей задачи?
    – Nilsan
    8 авг 2018 в 10:14
  • 2
    @РусланГохгалтер, нельзя. Только если задать жёстко какую-то высоту блокам. А на лету высчитывать высоту наименьшего блока и задавать её другим блокам через css невозможно. 8 авг 2018 в 11:22
6

$(document).ready(function() {
   var arr = [];
   $('.item').each(function(){
 	  arr.push($(this).height()); 
   });

   $('.item').height(Math.min.apply(Math, arr)); 
});
.wrapper{
  width:600px;
  height:200px;
  background:lightgrey;
}
.item{
  width:200px;
  float:left;
}
.item:nth-child(1){
  background:red;
}
.item:nth-child(2){
  background:green;
}
.item:nth-child(3){
  background:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="item">content content content content content content content content content content content content content content content content content content content content content content content content</div>
  <div class="item">content content contentcontent content contentcontent content content</div>
  <div class="item">content content contentcontent content contentcontent content contentcontent content contentcontent content content</div>
</div>

3

Если самый низкий, вы имеете ввиду по расположению, то можно сверстать на флексах:

.wrapper{
  width:600px;
  height:200px;
  display:flex;
  background:lightgrey;
}
.item{
  width:200px;
}
.item:nth-child(1){
  background:red;
}
.item:nth-child(2){
  background:green;
}
.item:nth-child(3){
  background:blue;
}
<div class="wrapper">
  <div class="item">content content content content content content content content content content content content content content content content content content content content content content content content</div>
  <div class="item">content content contentcontent content contentcontent content content</div>
  <div class="item">content content contentcontent content contentcontent content contentcontent content contentcontent content content</div>
</div>

1
  • 1
    "самого низкого" - это, скорее всего, самого маленького (раз для больших будет использован overflow: scroll), так что на чистом css тут не сделать 8 авг 2018 в 9:57

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.