Сделать одинаковую высоту блоков

265

04 июня 2018, 20:00

Нужно сделать одинаковую высоту блоков, при чем не фиксированную, а чтобы можно было добавлять контент и высота всего блока menu подстраивалась под больший из двух блоков (products и category).

Не использовать flexbox, нужна как можно бОльшая поддержка браузеров

.products, 
.category { 
  vertical-align: top; 
  display: inline-block; 
  margin: 0; 
} 
 
.products { 
  background: #ccc; 
} 
 
.category { 
  background: #398; 
}

<div class="menu"> 
  <ul class="products"> 
    <li> 
      item 
    </li> 
    <li> 
      item 
    </li> 
    <li> 
      item 
    </li> 
    <li> 
      item 
    </li> 
  </ul> 
  <ul class="category"> 
    <li>cat</li> 
    <li>cat</li> 
    <li>cat</li> 
    <li>cat</li> 
    <li>cat</li> 
  </ul> 
</div>

Answer 1

Вариант с Jquery

$(document).ready(function() { 
  $('.menu').css({ 
    height: $('.menu').height() 
  }) 
});

.products, 
.category { 
  vertical-align: top; 
  display: inline-block; 
  margin: 0; 
  height: 100%; 
} 
 
.products { 
  background: #ccc; 
} 
 
.category { 
  background: #398; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="menu"> 
  <ul class="products"> 
    <li> 
      item 
    </li> 
    <li> 
      item 
    </li> 
    <li> 
      item 
    </li> 
    <li> 
      item 
    </li> 
  </ul> 
  <ul class="category"> 
    <li>cat</li> 
    <li>cat</li> 
    <li>cat</li> 
    <li>cat</li> 
    <li>cat</li> 
  </ul> 
</div>

Answer 2

Старый добрый table-cell даже калькуляторы поддерживают

высота родителя сама подстраивается под высоту большего потомка

по БЭМ

* { 
  margin: 0; 
  padding: 0; 
} 
 
body { 
  padding: 10px; 
} 
 
.menu { 
  display: table; 
  border: 1px solid blue; 
} 
 
.item__menu { 
  display: table-cell; 
  vertical-align: middle; 
  text-align: center; 
} 
 
.item__menu--link { 
  text-decoration: none; 
  display: table-cell; 
  width: 1000px; 
  font-size: 10px; 
} 
 
@media (max-width:865px) { 
  .item__menu--link { 
    font-size: 12px; 
    font-family: Georgia; 
  } 
} 
 
@media (min-width:865px) { 
  .item__menu--link { 
    font-size: 16px; 
    font-family: monospace; 
  } 
}

<div class="menu"> 
  <div class="item__menu"> 
    <a href="#" class="item__menu--link">пункт меню</a> 
  </div> 
  <div class="item__menu"> 
    <a href="#" class="item__menu--link">второй пункт меню</a> 
  </div> 
  <div class="item__menu"> 
    <a href="#" class="item__menu--link">третий пункт с ещё одним словом</a> 
  </div> 
  <div class="item__menu"> 
    <a href="#" class="item__menu--link">этот пункт длинее прошлого но все они будут вертикалится</a> 
  </div> 
  <div class="item__menu"> 
    <a href="#" class="item__menu--link">котроткий пункт меню</a> 
  </div> 
</div>

меню из вашего комментария

* { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
  box-sizing: border-box; 
} 
 
ul { 
  display: inline-block; 
  height: auto; 
  border: 1px solid blue; 
  border-right: none; 
  position: relative; 
} 
 
ul li { 
  padding: 6px 40px 4px 10px; 
  border-right: 1px solid blue; 
} 
 
ul li:hover { 
  border-right: none; 
} 
 
ul li .hidden { 
  position: absolute; 
  left: 100%; 
  top: 0; 
  display: inline-block; 
  min-width: 300px; 
  height: 100%; 
  background: #fbfbfb; 
  padding: 0 10px; 
  border: 1px solid blue; 
  border-left: none; 
  display: none; 
} 
 
ul li:hover .hidden { 
  display: block; 
}

<ul> 
  <li> 
    <span>texttext1</span> 
    <div class="hidden">text elem1</div> 
  </li> 
  <li> 
    <span>texttext2</span> 
    <div class="hidden">text elem2</div> 
  </li> 
  <li> 
    <span>texttext3</span> 
    <div class="hidden">text elem3</div> 
  </li> 
  <li> 
    <span>texttext4</span> 
    <div class="hidden">text elem4</div> 
  </li> 
  <li> 
    <span>texttext5</span> 
    <div class="hidden">text elem5</div> 
  </li> 
  <li> 
    <span>texttext6</span> 
    <div class="hidden">text elem6</div> 
  </li> 
  <li> 
    <span>texttext7</span> 
    <div class="hidden">text elem7</div> 
  </li> 
  <li> 
    <span>texttext8</span> 
    <div class="hidden">text elem8</div> 
  </li> 
  <li> 
    <span>texttext9</span> 
    <div class="hidden">text elem9</div> 
  </li> 
  <li> 
    <span>texttext10</span> 
    <div class="hidden">text elem10</div> 
  </li> 
  <li> 
    <span>texttext11</span> 
    <div class="hidden">text elem11</div> 
  </li> 
  <li> 
    <span>texttext12</span> 
    <div class="hidden">text elem12</div> 
  </li> 
  <li> 
    <span>texttext13</span> 
    <div class="hidden">text elem13</div> 
  </li> 
  <li> 
    <span>texttext14</span> 
    <div class="hidden">text elem14</div> 
  </li> 
  <li> 
    <span>texttext15</span> 
    <div class="hidden">text elem15</div> 
  </li> 
  <li> 
    <span>texttext16</span> 
    <div class="hidden">text elem16</div> 
  </li> 
  <li> 
    <span>texttext17</span> 
    <div class="hidden">text elem17</div> 
  </li> 
  <li> 
    <span>texttext18</span> 
    <div class="hidden">text elem18</div> 
  </li> 
  <li> 
    <span>texttext19</span> 
    <div class="hidden">text elem19</div> 
  </li> 
  <li> 
    <span>texttext20</span> 
    <div class="hidden">text elem20</div> 
  </li> 
</ul>