Question

我目前正在学习Bootstrap，我还是比较新的，所以请放轻松我。我正在尝试创建一个页面，其中有一个页面的主标题，网格上方的标题，以及3个不等的响应网格，而不是跨越页面其余部分的高度，即使在调整浏览器大小时也是如此。我已经尝试设置高度或行和每个div为100％，我也尝试查找它但我没有找到任何有用的东西，我不知道我将如何实现这一点，感谢您抽出宝贵的时间来救命。代码是：

编辑：要指定，我的问题是让剩余区域占用100％的空间，而不是占用100％页面的div，只剩下其余部分

.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 个答案: