Как сделать так, чтобы высота столбца начальной загрузки достигла 100% высоты строки? [Дубликат]

70

Я не нашел подходящего решения для этого и кажется таким тривиальным.

У меня есть два столбца внутри строки:

<div class="row">
  <div class="col-xs-9">
    <div class="left-side">
      <p>sdfsdf</p>
      <p>sdfsdf</p>
      <p>sdfsdf</p>
    </div>
  </div>
  <div class="col-xs-3">
    <div class="something">asdfdf</div>
  </div>
</div>

Высота строки задается большей строкой, left-side. Тем не менее, я хочу, чтобы высота правой стороны была одинаковой.

Это кажется интуитивным, но оно не работает

.left-side {
    background-color: blue;
}
.something {
    height: 100%;
    background-color: red;
}
.row {
    background-color: green;
}

http://jsfiddle.net/ccorcos/jz8j247x/

  • 1
    Вы хотите сделать это с помощью CSS? или можете использовать jquery?
  • 1
    Только CSS пожалуйста
Показать ещё 2 комментария
Теги:

2 ответа

55
Лучший ответ

Вы можете решить это, используя таблицу display.

Здесь - обновленный JSFiddle, который решает вашу проблему.

CSS

.body {
    display: table;
    background-color: green;
}

.left-side {
    background-color: blue;
    float: none;
    display: table-cell;
    border: 1px solid;
}

.right-side {
    background-color: red;
    float: none;
    display: table-cell;
    border: 1px solid;
}

HTML

<div class="row body">
        <div class="col-xs-9 left-side">
            <p>sdfsdf</p>
            <p>sdfsdf</p>
            <p>sdfsdf</p>
            <p>sdfsdf</p>
            <p>sdfsdf</p>
            <p>sdfsdf</p>
        </div>
        <div class="col-xs-3 right-side">
            asdfdf
        </div>
    </div>
Поделиться
  • 2
    прекрасный. Есть ли какие-либо недостатки в этом? Я никогда не видел display: table честно говоря
  • 4
    Есть недостатки. Скажем, вы хотите, чтобы эта страница отображалась в col-md-9 и col-md-3, но для мобильных устройств вы хотите, чтобы каждый контейнер был полноширинным. Теперь вам нужно несколько медиа-запросов для исправления вашего решения по разметке таблицы. Кроме того, медиа-запросы не поддерживаются в IE8 и ниже.
Показать ещё 8 комментариев
22

@Alan ответ будет делать то, что вы ищете, но это решение выходит из строя, когда вы используете гибкие возможности Bootstrap. В вашем случае вы используете размеры xs, чтобы вы не заметили, но если вы использовали что-либо еще (например, col-sm, col-md и т.д.), Вы бы поняли.

Другой подход - играть с полями и заполнением. Смотрите обновленную скрипту: http://jsfiddle.net/jz8j247x/1/

.left-side {
  background-color: blue;
  padding-bottom: 1000px;
  margin-bottom: -1000px;
  height: 100%;
}
.something {
  height: 100%;
  background-color: red;
  padding-bottom: 1000px;
  margin-bottom: -1000px;
  height: 100%;
}
.row {
  background-color: green;
  overflow: hidden;
}
Поделиться
  • 1
    Неплохо, но если бы я поместил, скажем, Google Map там с height: 100% , то у меня была бы огромная карта, которая не полностью видна ...
  • 1
    Вы всегда можете обернуть свою карту в другой контейнер и измерить его. Вы должны иметь в виду, что это просто стиль этого контейнера.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню