Làm thế nào để tạo một bảng bootstrap có thể cuộn được 100% chiều cao?

Question

Dưới đây là một liên kết đến repo:

https://github.com/MoviesAroundMe/MoviesAroundMe2/tree/viewTemplate

Chúng tôi có một bảng:

<table class="table table-hover movie-list-table"> 
    <tr><td>1</td></tr> 
    <tr><td>2</td></tr> 
    <tr><td>3</td></tr> 
    <tr><td>4</td></tr> 
    <tr><td>5</td></tr> 
    <tr><td>6</td></tr> 
    <tr><td>7</td></tr> 
    <tr><td>8</td></tr> 
    <tr><td>9</td></tr> 
    </table> 

đó chiếm khoảng 75% chiều cao của trang, tôi đang cố gắng để có được nó để nó trải dài toàn bộ chiều cao (từ đầu trang xuống) của trang.

tôi đã cố gắng:

html { 
    height: 100%; 
} 

body { 
    min-height: 100%; 
} 

mà làm cho thành công chiều cao toàn thân nhưng bàn không tự động căng để lấp đầy khoảng trống mà ..

Cảm ơn

Answer 1

Tại sao không thiết lập chiều cao bảng sử dụng viewport percentage lengths?

table{ 
    height:100vh; 
} 

dài Viewport-tỷ lệ phần trăm được xác định chiều dài tương đối với kích thước của khung nhìn, đó là phần nhìn thấy được của tài liệu.

Ngoài ra, từ mã được cung cấp, chiều cao bàn là không được set-vì vậy bạn có thể muốn thêm height:100% (cũng như body) nếu bạn không có cảm giác như sử dụng vh.

Một lần nữa, mà không nhìn thấy mã nhiều hơn, nó khó có thể cung cấp một giải pháp phù hợp hơn, cách tiếp cận khác sẽ phải làm:

body{ 
    height:100%; 
    position:relative; 
} 
table{ 
    position:absolute; 
    top:0; 
    bottom:0; 
} 

Trên giả định bảng là một con trực tiếp của body