0

Нужно сделать одинаковую высоту блоков, при чем не фиксированную, а чтобы можно было добавлять контент и высота всего блока 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>

0

2 ответа 2

2

Вариант с 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>

10
  • Добавить больший из двух блоков
    – DiDex
    23 мая 2018 в 2:23
  • @DiDex, больший список будет растягивать блок .menu. Таким образом все будет работать. Высота списка равна 100% от родителя. Мы не знаем точно какая высота будет у меню, поэтому вычисляем ее после рендеринга.
    – ordman
    23 мая 2018 в 2:27
  • зачем для такого jQuery ? это же основы css ...
    – user33274
    23 мая 2018 в 2:35
  • Интересно. Вот пришла идея сделать такое условие: если высота блока "products" равна определенному числу, то у блока "category" сделать min-height со значением высоты "products". Не будет ли это костылём?))
    – stiv
    23 мая 2018 в 2:50
  • @StepanIvanov вы хотите сделать высоту меню на js ? вообще использование js для этого костыль жОсткий костыль
    – user33274
    23 мая 2018 в 3:20
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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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