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>

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?

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

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

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

回答1:

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

Absolutely postion the select element.
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

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

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.
Use d-flex on all of its parent including body, but not HTML.
Use flex-column on all of its parent container should they contain more than one element.
Use flex-grow-1 on all of its parent except HTMl.
Use flex-grow-1 on itself too.

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>

来源：https://stackoverflow.com/questions/62449711/full-page-height-for-select-via-bootstrap-4-how-to-get-the-page-view-on-the-i

标签

bootstrap-4