如何在没有垂直滚动的情况下指定屏幕的全高？

Posted

技术标签:

【中文标题】如何在没有垂直滚动的情况下指定屏幕的全高？【英文标题】：How do I specify the full height of the screen without vertical scrollable? 【发布时间】：2021-07-17 08:11:41 【问题描述】：

我希望橙色和蓝色区域位于屏幕的末尾，或者屏幕的全尺寸减去导航栏的高度。一旦我使用vh-100，它就具有完整的高度，但它会创建一个我不想要的垂直滚动条。所以我想要屏幕的全高或没有滚动条的总高度。我怎么做？ Bootstrap 中有没有像vh-100 - height of the navbar 这样的东西，所以一切都适合（但没有导航栏的“真实”高度。所以我没有定义导航栏的高度）？或者我怎么能说它应该占据整个高度而不创建垂直滚动条？

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div>
      <div class="row m-auto">
        <div class="col-md-12 p-0">
            <div>
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <a class="navbar-brand" href="#">
                    Navbar w/ text
          </a>
                <button
                    class="navbar-toggler"
                    type="button"
                    data-toggle="collapse"
                    data-target="#navbarText"
                    aria-controls="navbarText"
                    aria-expanded="false"
                    aria-label="Toggle navigation"
                >
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarText">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">
                                Home <span class="sr-only">(current)</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                Features
                </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                Pricing
                </a>
                        </li>
                    </ul>
                    <span class="navbar-text">Navbar text with an inline element</span>
                </div>
            </nav>
        </div>
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-4 bg-warning vh-100"> <!-- vh-100 -->
                        <div>
                  <div class="row m-1">
                    <div class="col-md-11">
                      Chats
                  </div>
                    <div class="col-md-1">
                      <i class="fas fa-plus-circle"></i>
                    </div>
                  </div>
                  <div class="row mb-2">
                    <div class="col-md-12">
                      <form class="form-inline" style= height: "0%", width: "100%", paddingLeft: "0", paddingRight: "0", paddingTop: "8px" >
                        <input class="form-control  mr-sm-1" style= width: "80%"  type="search" placeholder="Suchen" aria-label="Search" />
                        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
                      </form>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-12">
                      <div class="list-group">
                        <div>
            <a href="#" class="list-group-item list-group-item-action flex-column align-items-start" style=marginTop: "7.5px", marginBottom: "7.5px">
                <div class="d-flex w-100 justify-content-between">
                    <h5 class="mb-1">List group item heading</h5>
                    <small>3 days ago</small>
                </div>
                <div class="row">
                    <div class="col-md-11">Donec id elit non mi porta...
                    </div>
                    <div class="col-md-1">
                        <span class="badge badge-primary badge-pill text-right">5</span>
                    </div>
                </div>
            </a>
        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-8 bg-primary vh-100"> <!-- vh-100 -->
                  <div>
            <div class="row">
                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                    <div class="row">
                      <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                          <div class="row">
                          <!-- it should be the full width but unfortunatelly a scrollbar appears because of this section right here... -->
                              <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
                                  <img src="..." class="image-head-chat"  />
                              </div>

                              <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
                                  Text
                              </div>

                              <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
                                  Icons
                              </div>
                           </div>
                        </div>
                    </div>


                    <div class="row">
                        <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                            Nachrichten
            </div>
                    </div>

                    <div class="row">
                        <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                            Eingabe
              <div class="row">
                                Form
              </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

</body>
</html>

我读过这个

When using "height: 100vh" for the container, vertical scrollbar appears Extra scrollbar when body height is 100vh

【问题讨论】：

【参考方案1】：

执行以下操作 -

第 1 步：从代码中删除所有 100-vh 类

STEP 2：在body标签末尾添加如下代码sn-p -

<script>
    navHeight = document.querySelectorAll('.navbar-expand-lg')[0]
        .clientHeight;

    document.querySelectorAll('.container-fluid>.row>div')[0].style.height = `calc(100vh - $navHeightpx)`;
    document.querySelectorAll('.container-fluid>.row>div')[1].style.height = `calc(100vh - $navHeightpx)`;
</script>

最终结果::

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>

<body>
  <div>
    <div class="row m-auto">
      <div class="col-md-12 p-0">
        <div>
          <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">
                            Navbar w/ text
                        </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
            <div class="collapse navbar-collapse" id="navbarText">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#">
                                        Home <span class="sr-only">(current)</span>
                                    </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">
                                        Features
                                    </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">
                                        Pricing
                                    </a>
                </li>
              </ul>
              <span class="navbar-text">Navbar text with an inline element</span>
            </div>
          </nav>
        </div>
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-4 bg-warning">
              <div>
                <div class="row m-1">
                  <div class="col-md-11">
                    Chats
                  </div>
                  <div class="col-md-1">
                    <i class="fas fa-plus-circle"></i>
                  </div>
                </div>
                <div class="row mb-2">
                  <div class="col-md-12">
                    <form class="form-inline" style= height: "0%", width: "100%", paddingLeft: "0", paddingRight: "0", paddingTop: "8px" >
                      <input class="form-control  mr-sm-1" style= width: "80%"  type="search" placeholder="Suchen" aria-label="Search" />
                      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
                    </form>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-12">
                    <div class="list-group">
                      <div>
                        <a href="#" class="list-group-item list-group-item-action flex-column align-items-start" style=marginTop: "7.5px", marginBottom: "7.5px">
                          <div class="d-flex w-100 justify-content-between">
                            <h5 class="mb-1">List group item heading</h5>
                            <small>3 days ago</small>
                          </div>
                          <div class="row">
                            <div class="col-md-11">Donec id elit non mi porta...
                            </div>
                            <div class="col-md-1">
                              <span class="badge badge-primary badge-pill text-right">5</span>
                            </div>
                          </div>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-8 bg-primary">
              <div>
                <div class="row">
                  <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                    <div class="row">
                      <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                        <div class="row">
                          <!-- it should be the full width but unfortunatelly a scrollbar appears because of this section right here... -->
                          <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
                            <img src="..." class="image-head-chat"  />
                          </div>

                          <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
                            Text
                          </div>

                          <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
                            Icons
                          </div>
                        </div>
                      </div>
                    </div>


                    <div class="row">
                      <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                        Nachrichten
                      </div>
                    </div>

                    <div class="row">
                      <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                        Eingabe
                        <div class="row">
                          Form
                        </div>
                      </div>
                    </div>

                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <script>
    navHeight = document.querySelectorAll('.navbar-expand-lg')[0]
      .clientHeight;

    document.querySelectorAll('.container-fluid>.row>div')[0].style.height = `calc(100vh - $navHeightpx)`;
    document.querySelectorAll('.container-fluid>.row>div')[1].style.height = `calc(100vh - $navHeightpx)`;
  </script>
</body>

</html>

【讨论】：

【参考方案2】：

一种方法是使用 height: row 上的 calc(100vh – 3.5rem) 将底部的高度设置为等于视口高度减去导航栏的高度（56px 或 3.5rem）。

或者我添加到您的代码中的另一个选项是使用 flex。

Calc 将适用于所有现代浏览器，以及 IE9 及更高版本，而 flex 适用于所有现代浏览器，以及 IE11。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>


<div class="container-fluid vh-100 d-flex flex-column no-gutters px-0">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">
            Navbar w/ text
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarText">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">
                        Home <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        Features
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        Pricing
                    </a>
                </li>
            </ul>
            <span class="navbar-text">Navbar text with an inline element</span>
        </div>
    </nav>

    <div class="container-fluid d-flex flex-grow-1 flex-column">
        <div class="row flex-grow-1">
            <div class="col-md-4 bg-warning">
                <!-- vh-100 -->
                <div>
                    <div class="row m-1">
                        <div class="col-md-11">
                            Chats
                        </div>
                        <div class="col-md-1">
                            <i class="fas fa-plus-circle"></i>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <div class="col-md-12">
                            <form class="form-inline" style="height: 0%; width: 100%; padding-left: 0; padding-right: 0; padding-top: 8px">
                                <input class="form-control  mr-sm-1" style="width: 80%;" type="search" placeholder="Suchen" aria-label="Search" />
                                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
                            </form>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="list-group">
                                <div>
                                    <a href="#" class="list-group-item list-group-item-action flex-column align-items-start" style="margin-top: 7.5px; margin-bottom: 7.5px">
                                        <div class="d-flex w-100 justify-content-between">
                                            <h5 class="mb-1">List group item heading</h5>
                                            <small>3 days ago</small>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-11">Donec id elit non mi porta...
                                            </div>
                                            <div class="col-md-1">
                                                <span class="badge badge-primary badge-pill text-right">5</span>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-8 bg-primary">
                <div>
                    <div class="row">
                        <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                            <div class="row">
                                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                    <div class="row">
                                        <!-- it should be the full width but unfortunatelly a scrollbar appears because of this section right here... -->
                                        <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
                                            <img src="..." class="image-head-chat"  />
                                        </div>

                                        <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
                                            Text
                                        </div>

                                        <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
                                            Icons
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="row">
                                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                    Nachrichten
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                    Eingabe
                                    <div class="row">
                                        Form
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

【讨论】：

以上是关于如何在没有垂直滚动的情况下指定屏幕的全高？的主要内容，如果未能解决你的问题，请参考以下文章

如何在没有（减号）滚动条的情况下获得屏幕宽度？

将内部 div 拉伸到屏幕的全高和溢出的内容

HTML 表格全高和全宽，无滚动

在没有全屏浏览器的情况下在图像上显示全高（使用封面）

如何以包装器的全高浮动元素？

将 iFrame 设置为固定页脚和页眉之间的全高