1

Есть такой код:

<div class="main" style="background: #acdf43; text-align: center;">
    <div class="l1" style="display: inline-block; background: #aaa;">123123123123123123123123123<br>321321321321321321321321321321321321321321321<br>111111111111111111<br>222222<br>333333333</div>
    <div class="l2" style="display: inline-block; background: #f00; vertical-align: bottom; height: 100%; width: 100px;">000</div>
</div>

У блока L1 переменная высота и ширина. Нужно, чтобы у блока L2 была высота такая же, как и у блока L1. Поставить height: 100% не помогает. Высота не меняется.

У L1 ширина не задана, но у L2 — задана и фиксирована.

Вот скриншоты для понимания. Есть сейчас: есть
(источник: joxi.ru)

Надо: надо
(источник: joxi.ru)

2 ответа 2

1

height: 100% в классе l2 не будет работать, т.к. в настоящий момент высота родительского блока вычисляется по содержимому. Для работы данного свойства необходимо в классе main явно указать высоту блока, на пример:

<div class="main" style="background: #acdf43; text-align: center; height: 90px;">
    <div class="l1" style="display: inline-block; background: #aaa;">123123123123123123123123123<br>321321321321321321321321321321321321321321321<br>111111111111111111<br>222222<br>333333333</div>
    <div class="l2" style="display: inline-block; background: #f00; vertical-align: bottom; height: 100%; width: 100px;">000</div>
</div>

Но задача стоит ведь динамически определять высоту. В данном случае я бы воспользовался javascript

<div class="main" style="background: #acdf43; text-align: center;">
    <div class="l1" style="display: inline-block; background: #aaa;">123123123123123123123123123<br>321321321321321321321321321321321321321321321<br>111111111111111111<br>222222<br>333333333</div>
    <div class="l2" style="display: inline-block; background: #f00; vertical-align: bottom; width: 100px;">000</div>
</div>
<script>
  var l1H = document.getElementsByClassName("l1")[0].offsetHeight;
  document.getElementsByClassName("l2")[0].style.height = l1H + "px";
</script>

То есть l1 генерируется в зависимости от контента. Далее скрипт получает его высоту и присваивает её через CSS свойство height элементу l2

1

А через свойство flex не пробовали? Зачем эта старая возня с тэйблами.

<div class="main" style="text-align: center; background: #acdf43; display:flex;">
    <div class="l1" style="margin-left:auto; background: #aaa;">123123123123123123123123123<br>321321321321321321321321321321321321321321321<br>111111111111111111<br>222222<br>333333333</div>
    <div class="l2" style="margin-right: auto; background: #f00;">000</div>
</div>

3
  • Атрибут, конечно, классный, но что делать с поддержкой на устаревших браузерах? На пример на IE младше 10 версии 26 сен 2016 в 16:48
  • Судя по всему просто забить на поддержку старых браузеров, я думаю это вопрос времени, они потихоньку уже уходят в небытие, конечно если нужна поддержка старых браузеров это не вариант. 26 сен 2016 в 19:43
  • Но это значит отбросить сразу ~25-30% пользователей. Хотя всё конечно зависит от назначения продукта и ЦА. 26 сен 2016 в 20:39

Ваш ответ

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

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