Pertanyaan Bagaimana cara membuat tinggi kolom bootstrap hingga tinggi baris 100%? [duplikat]


Pertanyaan ini sudah memiliki jawaban di sini:

Saya belum menemukan solusi yang cocok untuk ini dan tampaknya begitu sepele.

Saya memiliki dua kolom di dalam satu baris:

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

Tinggi baris diatur oleh baris yang lebih besar, left-side. Namun, saya ingin ketinggian sisi kanan menjadi sama.

Ini tampaknya intuitif, tetapi tidak berhasil

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

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


75
2017-08-08 22:30


asal


Jawaban:


Anda bisa memecahkan itu menggunakan tampilan meja.

Sini adalah JSFiddle yang diperbarui yang memecahkan masalah Anda.

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>

58
2017-08-08 22:46



@ Jawaban Alan akan melakukan apa yang Anda cari, tetapi solusi ini gagal ketika Anda menggunakan kemampuan Bootstrap yang responsif. Dalam kasus Anda, Anda menggunakan xs ukuran sehingga Anda tidak akan memperhatikan, tetapi jika Anda menggunakan yang lain (mis. col-sm, col-md, dll), Anda akan mengerti.

Pendekatan lain adalah bermain dengan margin dan padding. Lihat biola yang diperbarui: 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;
}

24
2017-08-08 23:01