부트 스트랩 열 높이를 100 % 행 높이로 만드는 방법은 무엇입니까?

부트 스트랩 열 높이를 100 % 행 높이로 만드는 방법은 무엇입니까?

---

이 질문에 이미 답변이 있습니다.

• Bootstrap 열을 모두 같은 높이로 만들려면 어떻게해야합니까? 33 답변

나는 이것에 대한 적절한 해결책을 찾지 못했고 너무 사소한 것 같습니다.

행 안에 두 개의 열이 있습니다.

<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/

---

디스플레이 테이블 을 사용하여 해결할 수 있습니다 .

다음 은 문제를 해결하는 업데이트 된 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>

---

@Alan's answer will do what you're looking for, but this solution fails when you use the responsive capabilities of Bootstrap. In your case, you're using the xs sizes so you won't notice, but if you used anything else (e.g. col-sm, col-md, etc), you'd understand.

Another approach is to play with margins and padding. See the updated fiddle: 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;
}

참고URL : https://stackoverflow.com/questions/25213171/how-to-make-bootstrap-column-height-to-100-row-height