“选择"页面的完整页面高度通过Bootstrap4.如何在图像2上获得页面视图? [英] Full page height for "select" via Bootstrap 4. How to get the page view on the image 2?

问题描述

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-light bg-primary">
    <div class="navbar-brand mr-auto">Brand</div>
    <div class="navbar-brand">Site</div>
    <button type="button" class="ml-auto btn btn-success">Login</button>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-3 table-success">
            111<br>
            222
        </div>
        <div class="col-9 table-warning">
            111 222<br>
            333 444<br>
            555 666
        </div>
    </div>
    <div class="row">
        <div class="col-3 table-danger">
            <div class="form-group">
                <label class="input-group-text">Title</label>
                <select multiple class="form-control">
                    <option>Value 1</option>
                    <option>Value 2</option>
                    <option>Value 3</option>
                </select>
            </div>
        </div>
    </div>
</div>

如何将div(class ="col-3 table-danger")拉伸到页面底部? 考虑到填充和边距，如何将选择(class ="form-control")拉伸到页面底部?

How to stretch div (class="col-3 table-danger") to the bottom of the page? And how to stretch select (class="form-control") to the bottom of the page considering padding and margin?

"h-100"属性不起作用，因为选择"超出了底部的页面边框或未拉伸.

The "h-100" property does not work, since the "select" goes beyond the page border at the bottom or not stretched.

我有这种页面(页面视图). (图1)

I have this kind of page (page view). (image 1)

如何获得这种页面(页面视图)? (图2)

How to get this kind of page (page view)? (image 2)

推荐答案

至少有两种方法可以做到这一点.

There are at least two ways that you can do this.

1. 绝对将选择元素放在位置.
2. 使用flex-grow-1，使其占用所有可用空间.我认为这是一个更好的解决方案，因为它不涉及固定的单位大小.

1. Absolutely postion the select element.
2. Use flex-grow-1 so that it occupies all the available space. I think this one is a better solution because it does not involve fixed unit size.

---

flex-grow

flex-grow CSS属性设置弹性项目的弹性增长因子 主要尺寸.它指定flex中剩余的空间量 容器应分配给项目(弹性增长因子).

The flex-grow CSS property sets the flex grow factor of a flex item main size. It specifies how much of the remaining space in the flex container should be assigned to the item (the flex grow factor).

https://developer.mozilla.org

• select元素的所有父项都需要占用所有可用空间.如果是独生子，则必须有100％的身高.

  • All of the parents of the select element needs to take all the available space. If it is the only child, it must have 100% height.

    在其所有父项(包括正文)上使用d-flex，但不使用HTML.

    Use d-flex on all of its parent including body, but not HTML.

    html,
    body {
      height: 100%
    }
    
    body {
      display: flex;
      flex-direction: column;
    }

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
    <nav class="navbar navbar-light bg-primary">
      <div class="navbar-brand mr-auto">Brand</div>
      <div class="navbar-brand">Site</div>
      <button type="button" class="ml-auto btn btn-success">Login</button>
    </nav>
    
    <div class="container-fluid d-flex flex-column flex-grow-1">
      <div class="row">
        <div class="col-3 table-success">
          111<br> 222
        </div>
        <div class="col-9 table-warning">
          111 222<br> 333 444<br> 555 666
        </div>
      </div>
      <div class="row flex-grow-1">
        <div class="col-3 d-flex flex-column table-danger form-group">
          <label class="input-group-text">Title</label>
          <select multiple class="form-control flex-grow-1">
            <option>Value 1</option>
            <option>Value 2</option>
            <option>Value 3</option>
          </select>
        </div>
      </div>
    </div>

    这篇关于“选择"页面的完整页面高度通过Bootstrap4.如何在图像2上获得页面视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！