文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何设置引导行的最小高度

问如何设置引导行的最小高度
EN

Stack Overflow用户
提问于 2021-03-10 07:24:47
回答 2查看 5.5K关注 0票数 2

我在设置自举行的最小高度时有问题。我希望我的行最小高度大小与父元素一样高。例如

​

代码语言：javascript
复制
body {
  height: 100%;
}

.header {
  height: 30px;
}

.footer {
  height: 100px;
}
代码语言：javascript
复制
<div class="container">
  <div class="row header bg-primary">
    <div class="col-6">Title item</div>
    <div class="col-2">Title item</div>
    <div class="col-2">Title item</div>
    <div class="col-2">Title item</div>
  </div>
  <div class="row h-100 body bg-success">
    <div class="col-12 h-100">
      <div class="row">
        <div class="col-6">item 1</div>
        <div class="col-2">item 1</div>
        <div class="col-2">item 1</div>
        <div class="col-2">item 1</div>
      </div>
      <div class="row">
        <div class="col-6">item a</div>
        <div class="col-2">item a</div>
        <div class="col-2">item a</div>
        <div class="col-2">item a</div>
      </div>
    </div>
  </div>
  <div class="row footer bg-danger">
    <div class="col-12"></div>
  </div>
</div>

​

从上面的例子中，我希望我的类体有最小高度: 100%填充父元素的整个高度。

html
css
bootstrap-4
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-03-10 07:55:53

您可以使用flex类-flex-grow 1告诉内容行展开以填充可用空间。

​

代码语言：javascript
复制
.footer {
    min-height: 100px;
}
代码语言：javascript
复制
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container min-vh-100 d-flex flex-column">
    <div class="row header bg-primary">
        <div class="col-6">Title item</div>
        <div class="col-2">Title item</div>
        <div class="col-2">Title item</div>
        <div class="col-2">Title item</div>
    </div>
    <div class="row bg-success flex-grow-1">
        <div class="col-12 h-100">
            <div class="row">
                <div class="col-6">item 1</div>
                <div class="col-2">item 2</div>
                <div class="col-2">item 3</div>
                <div class="col-2">item 4</div>
            </div>
            <div class="row">
                <div class="col-6">item a</div>
                <div class="col-2">item b</div>
                <div class="col-2">item c</div>
                <div class="col-2">item d</div>
            </div>
        </div>
    </div>
    <div class="row footer bg-danger">
        <div class="col-12"></div>
    </div>
</div>

​

如果您想让您的内容只填充页面，则可以让绿色区域展开以填充剩余空间(flex-grow-1)，如果绿色区域大于空间，则让内容滚动。

​

代码语言：javascript
复制
.footer {
    min-height: 100px;
}
代码语言：javascript
复制
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container vh-100 d-flex flex-column">
    <div class="row header bg-primary">
        <div class="col-6">Title item</div>
        <div class="col-2">Title item</div>
        <div class="col-2">Title item</div>
        <div class="col-2">Title item</div>
    </div>
    <div class="row bg-success flex-grow-1" style="overflow-y: scroll;">
        <div class="col-12 h-100">
            <div class="row">
                <div class="col-6">item 1</div>
                <div class="col-2">item 2</div>
                <div class="col-2">item 3</div>
                <div class="col-2">item 4</div>
            </div>
            <div class="row">
                <div class="col-6">item a</div>
                <div class="col-2">item b</div>
                <div class="col-2">item c</div>
                <div class="col-2">item d</div>
            </div>
            <div class="row">
                <div class="col-6">item 1</div>
                <div class="col-2">item 2</div>
                <div class="col-2">item 3</div>
                <div class="col-2">item 4</div>
            </div>
            <div class="row">
                <div class="col-6">item a</div>
                <div class="col-2">item b</div>
                <div class="col-2">item c</div>
                <div class="col-2">item d</div>
            </div>
            <div class="row">
                <div class="col-6">item 1</div>
                <div class="col-2">item 2</div>
                <div class="col-2">item 3</div>
                <div class="col-2">item 4</div>
            </div>
            <div class="row">
                <div class="col-6">item a</div>
                <div class="col-2">item b</div>
                <div class="col-2">item c</div>
                <div class="col-2">item d</div>
            </div>
            <div class="row">
                <div class="col-6">item 1</div>
                <div class="col-2">item 2</div>
                <div class="col-2">item 3</div>
                <div class="col-2">item 4</div>
            </div>
            <div class="row">
                <div class="col-6">item a</div>
                <div class="col-2">item b</div>
                <div class="col-2">item c</div>
                <div class="col-2">item d</div>
            </div>
            <div class="row">
                <div class="col-6">item 1</div>
                <div class="col-2">item 2</div>
                <div class="col-2">item 3</div>
                <div class="col-2">item 4</div>
            </div>
            <div class="row">
                <div class="col-6">item a</div>
                <div class="col-2">item b</div>
                <div class="col-2">item c</div>
                <div class="col-2">item d</div>
            </div>
            <div class="row">
                <div class="col-6">item 1</div>
                <div class="col-2">item 2</div>
                <div class="col-2">item 3</div>
                <div class="col-2">item 4</div>
            </div>
            <div class="row">
                <div class="col-6">item a</div>
                <div class="col-2">item b</div>
                <div class="col-2">item c</div>
                <div class="col-2">item d</div>
            </div>
            <div class="row">
                <div class="col-6">item 1</div>
                <div class="col-2">item 2</div>
                <div class="col-2">item 3</div>
                <div class="col-2">item 4</div>
            </div>
            <div class="row">
                <div class="col-6">item a</div>
                <div class="col-2">item b</div>
                <div class="col-2">item c</div>
                <div class="col-2">item d</div>
            </div>
            <div class="row">
                <div class="col-6">item 1</div>
                <div class="col-2">item 2</div>
                <div class="col-2">item 3</div>
                <div class="col-2">item 4</div>
            </div>
            <div class="row">
                <div class="col-6">item a</div>
                <div class="col-2">item b</div>
                <div class="col-2">item c</div>
                <div class="col-2">item d</div>
            </div>
            <div class="row">
                <div class="col-6">item 1</div>
                <div class="col-2">item 2</div>
                <div class="col-2">item 3</div>
                <div class="col-2">item 4</div>
            </div>
            <div class="row">
                <div class="col-6">item a</div>
                <div class="col-2">item b</div>
                <div class="col-2">item c</div>
                <div class="col-2">item d</div>
            </div>
            <div class="row">
                <div class="col-6">item 1</div>
                <div class="col-2">item 2</div>
                <div class="col-2">item 3</div>
                <div class="col-2">item 4</div>
            </div>
            <div class="row">
                <div class="col-6">item a</div>
                <div class="col-2">item b</div>
                <div class="col-2">item c</div>
                <div class="col-2">item d</div>
            </div>
            <div class="row">
                <div class="col-6">item 1</div>
                <div class="col-2">item 2</div>
                <div class="col-2">item 3</div>
                <div class="col-2">item 4</div>
            </div>
            <div class="row">
                <div class="col-6">item a</div>
                <div class="col-2">item b</div>
                <div class="col-2">item c</div>
                <div class="col-2">item d</div>
            </div>
            <div class="row">
                <div class="col-6">item 1</div>
                <div class="col-2">item 2</div>
                <div class="col-2">item 3</div>
                <div class="col-2">item 4</div>
            </div>
            <div class="row">
                <div class="col-6">item a</div>
                <div class="col-2">item b</div>
                <div class="col-2">item c</div>
                <div class="col-2">item d</div>
            </div>
            <div class="row">
                <div class="col-6">item 1</div>
                <div class="col-2">item 2</div>
                <div class="col-2">item 3</div>
                <div class="col-2">item 4</div>
            </div>
            <div class="row">
                <div class="col-6">item a</div>
                <div class="col-2">item b</div>
                <div class="col-2">item c</div>
                <div class="col-2">item d</div>
            </div>
            <div class="row">
                <div class="col-6">item 1</div>
                <div class="col-2">item 2</div>
                <div class="col-2">item 3</div>
                <div class="col-2">item 4</div>
            </div>
            <div class="row">
                <div class="col-6">item a</div>
                <div class="col-2">item b</div>
                <div class="col-2">item c</div>
                <div class="col-2">item d</div>
            </div>
            <div class="row">
                <div class="col-6">item 1</div>
                <div class="col-2">item 2</div>
                <div class="col-2">item 3</div>
                <div class="col-2">item 4</div>
            </div>
            <div class="row">
                <div class="col-6">item a</div>
                <div class="col-2">item b</div>
                <div class="col-2">item c</div>
                <div class="col-2">item d</div>
            </div>
            <div class="row">
                <div class="col-6">item 1</div>
                <div class="col-2">item 2</div>
                <div class="col-2">item 3</div>
                <div class="col-2">item 4</div>
            </div>
            <div class="row">
                <div class="col-6">item a</div>
                <div class="col-2">item b</div>
                <div class="col-2">item c</div>
                <div class="col-2">item d</div>
            </div>
            <div class="row">
                <div class="col-6">item 1</div>
                <div class="col-2">item 2</div>
                <div class="col-2">item 3</div>
                <div class="col-2">item 4</div>
            </div>
            <div class="row">
                <div class="col-6">item a</div>
                <div class="col-2">item b</div>
                <div class="col-2">item c</div>
                <div class="col-2">item d</div>
            </div>
        </div>
    </div>
    <div class="row footer bg-danger">
        <div class="col-12"></div>
    </div>
</div>

​

票数 1
EN

Stack Overflow用户

发布于 2021-03-10 07:56:04

这将使所有行对具有类height的rows具有相等的row-equal-height，如果这是您所要求的？

​

代码语言：javascript
复制
   body {
     height:100%;
   }

   .footer {
      height:100px;
    }
    
.row-equal-height{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
代码语言：javascript
复制
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
             <div class="container">
          <div class="row row-equal-height   bg-primary">
              <div class="col-6">Title item</div>
              <div class="col-2">Title item</div>
              <div class="col-2">Title item</div>
              <div class="col-2">Title item</div>
          </div>
          <div class="row  row-equal-height  h-100 body bg-success">
              <div class=" col-12 h-100">
                  <div class="row">
                    <div class="col-6">item 1</div>
                    <div class="col-2">item 2</div>
                    <div class="col-2">item 3</div>
                    <div class="col-2">item 4</div>
                  </div>
                  <div class="row">
                    <div class="col-6">item a</div>
                    <div class="col-2">item b</div>
                    <div class="col-2">item c</div>
                    <div class="col-2">item d</div>
                  </div>
              </div>
          </div>
          <div class="row footer bg-danger">
            <div class="col-12"></div>
          </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/66560103

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档