Bootstrap 4制作網格占據頁面其余部分的100％高度

Question

我目前正在學習Bootstrap，但是我還很新，所以請放輕松。 我正在嘗試制作一個頁面，該頁面的主要標題，網格上方的標題和3個不相等的響應網格跨越了頁面其余部分的高度，即使在調整瀏覽器大小時也是如此。 我嘗試將高度或行和每個div設置為100％，我也嘗試過查找，但沒有發現太多用處，我不確定如何實現這一目標，感謝您抽出寶貴的時間救命。 代碼是：

編輯：要指定，我的問題是讓剩余區域占用100％的空間，而不是div占用頁面的100％，僅剩余部分

 .div1 { background-color:red; } .div2 { background-color:gray; } .div3 { background-color:blue; } .row { height: 100%; } #main { background-color: yellow; }

  <!DOCTYPE html> <html> <html lang="en"> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script> </head> <body> <link rel="stylesheet" href="test.css"> <script src="test.js"></script> <h1>Welcome</h1> <div class="container-fluid" id="main"> <h1>This is a heading</h1> <div class="row"> <div class="col-sm-3 div1">Left side</div> <div class="col-sm-6 div2">Middle</div> <div class="col-sm-3 div3">Right side</div> </div> </div> </body> </html>

Answer 1

嘗試這個

.row {
    height: 100vh;
}

此處了解更多信息： https : //stackoverflow.com/a/16837667/7361767

Bootstrap 4制作網格占據頁面其余部分的100％高度

問題描述

1 個解決方案

解決方案1
2 已采納 2017-11-10 18:16:55

Bootstrap 4制作網格占據頁面其余部分的100％高度

問題描述

1 個解決方案

解決方案1 2 已采納 2017-11-10 18:16:55

解決方案1
2 已采納 2017-11-10 18:16:55