Câu hỏi Làm thế nào để làm cho chiều cao cột bootstrap lên 100% chiều cao hàng? [bản sao]


Câu hỏi này đã có câu trả lời ở đây:

Tôi đã không tìm thấy một giải pháp phù hợp cho điều này và nó có vẻ rất tầm thường.

Tôi có hai cột trong một hàng:

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

Chiều cao hàng được đặt bởi hàng lớn hơn, left-side. Tuy nhiên, tôi muốn chiều cao của bên phải giống nhau.

Điều này có vẻ trực quan, nhưng nó không hoạt động

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

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


76
2017-08-08 22:30


gốc


bạn muốn làm điều đó với css? hoặc có thể sử dụng jquery? - martinezjc
Vui lòng chỉ CSS - Chet
Tôi thấy rằng bài viết khác. Nhưng khác biệt của nó. Họ đang sử dụng một bảng để tạo tiêu đề, thanh bên, bố cục nội dung - Chet
ai đó có thể bỏ đánh dấu câu hỏi này là trùng lặp? Tôi có một giải pháp khác có thể giúp ... - Alan Souza


Các câu trả lời:


Bạn có thể giải quyết điều đó bằng cách sử dụng trưng bày bàn.

Đây là JSFiddle được cập nhật giúp giải quyết vấn đề của bạn.

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>

59
2017-08-08 22:46



đẹp. Có bất kỳ hạn chế nào đối với điều này không? Tôi chưa từng thấy display: table thành thật - Chet
Có những hạn chế. Giả sử bạn muốn trang này hiển thị ở col-md-9 và col-md-3, nhưng đối với thiết bị di động, bạn muốn mỗi vùng chứa có chiều rộng đầy đủ. Bây giờ bạn cần một loạt các truy vấn phương tiện để khắc phục giải pháp bố cục bảng của bạn. Ngoài ra, các truy vấn phương tiện không được hỗ trợ trong IE8 trở xuống. - Esteban
whats nỗi ám ảnh này với IE tương thích? lol - Chet
Làm thế nào để bạn làm cho hàng cũng 100% chiều cao, và cũng là cơ thể, do đó, nó có tất cả các cửa sổ? - Ronen Festinger
@Chet IE vẫn là một trình duyệt được sử dụng rộng rãi trên phạm vi quốc tế. Nếu bạn đang làm một trang web công cộng, bạn sẽ điên không hỗ trợ nó, mặc dù một nỗi đau - geedubb


@ Alan của câu trả lời sẽ làm những gì bạn đang tìm kiếm, nhưng giải pháp này không thành công khi bạn sử dụng khả năng đáp ứng của Bootstrap. Trong trường hợp của bạn, bạn đang sử dụng xs kích thước để bạn không nhận thấy, nhưng nếu bạn sử dụng bất kỳ thứ gì khác (ví dụ: col-sm, col-md, vv), bạn sẽ hiểu.

Cách tiếp cận khác là chơi với lề và đệm. Xem fiddle cập nhật: 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



Không tệ, nhưng nếu tôi nói, một bản đồ Google ở ​​đó với height: 100%thì tôi sẽ có một bản đồ khổng lồ không thể nhìn thấy hoàn toàn ... - Chet
bạn luôn có thể quấn bản đồ của mình vào một vùng chứa khác và kích thước đó. bạn phải ghi nhớ đây chỉ là kiểu dáng 'này' container. - Esteban
@Esteban - Đây là giải pháp tốt vì nó giải quyết được vấn đề đáp ứng, tuy nhiên nó không cho phép bạn có bất kỳ kiểu dáng nào ở dưới cùng của các phần tử (ví dụ: đường viền dưới). Bạn có đề nghị nào không? - KingOfTheNerds
Điều này sẽ không hoạt động quá 1000px, vì vậy nó không hữu ích cho các tập dữ liệu lớn hơn. - Rick
@ Thay đổi nó thành 2000px, 3000px? Nó chỉ là một cách giải quyết hacky cho một vấn đề cụ thể. Bạn luôn có thể sử dụng flexbox. - Esteban