主页 / 问题 / 1109696
Accepted
ZOOM SMASH
Asked:2020-04-13 20:00:22 +0000 UTC2020-04-13 20:00:22 +0000 UTC

将块设置为父级中剩余的高度

  • 772

body它需要我100vh。在页面的顶部有一个nav需要它的高度。如何设置块的高度mainContainer，使其将高度带到最后body（其中是否有足够的内容，是不是，或者它是否像屏幕截图中那样溢出）并且不超出它？例如，如果您设置，max-height: 100%那么由于存在nav. 屏幕截图以全高显示页面body。使用的类来自 Bootstrap 4。

在此处输入图像描述

<body class="bg-darkness vh-100 d-flex flex-column pb-lg-4">
  <nav class="navbar navbar-dark bg-dark">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Logo</a>
    </div>
  </nav>
  <div id="mainContainer" class="container-fluid container-lg pt-lg-2 flex-grow-1">
    <div class="row h-100">
      <div id="openedDialogContainer" class="col-12 col-sm-12 col-md-12 col-lg-8 h-100 bg-dark text-white p-0 d-flex flex-column justify-content-between">
        <div class="dialogInfo text-center pt-2 pb-1 border-bottom">
          <div class="dialogInfoTitle">Mustafa</div>
          <div class="dialogInfoStatus status">online</div>
        </div>
        <div class="pt-2 pb-2 container-lg h-100 y-scroll">
          <div class="messageContainer">
            <div class="message bg-white text-dark px-2 py-1 rounded d-inline-block">
              <div class="messageText">Hello!</div>
              <div class="messageStatus"></div>
            </div>
          </div>
          <div class="messageContainer mt-2 overflow-hidden">
            <div class="message bg-white text-dark px-2 py-1 w-75 rounded d-inline-block float-right">
              <div class="messageText text-break">Hello!HelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHello</div>
              <div class="messageStatus float-right">
                <svg class="bi bi-check-all" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="" clip-rule="evenodd"/>
                    <path d=""/>
                 </svg>
              </div>
            </div>
          </div>
        </div>
        <div class="container-lg">
           <div class="row p-2">
              <input type="text" class="form-control col col-sm col-md col-lg">
              <button class="btn col-auto col-sm-auto col-md-auto col-lg-auto">
                 <svg class="bi bi-triangle rotate invert" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="" clip-rule="evenodd" />
                 </svg>
              </button>
           </div>
        </div>         
     </div>
</body>

html

1 个回答

  1. Best Answer

    您需要设置高度nav，对于您设置高度 100vh 减去高度的容器nav

    body{
  height: 100vh;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
nav{
  background: #ccc;
  height: 50px;
}
.container-fluid{
 height: calc(100vh - 50px);
}
    <body class="bg-darkness vh-100 d-flex flex-column pb-lg-4">
  <nav class="navbar navbar-dark bg-dark">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Logo</a>
    </div>
  </nav>
  <div id="mainContainer" class="container-fluid container-lg pt-lg-2 flex-grow-1">
    <div class="row h-100">
      <div id="openedDialogContainer" class="col-12 col-sm-12 col-md-12 col-lg-8 h-100 bg-dark text-white p-0 d-flex flex-column justify-content-between">
        <div class="dialogInfo text-center pt-2 pb-1 border-bottom">
          <div class="dialogInfoTitle">Mustafa</div>
          <div class="dialogInfoStatus status">online</div>
        </div>
        <div class="pt-2 pb-2 container-lg h-100 y-scroll">
          <div class="messageContainer">
            <div class="message bg-white text-dark px-2 py-1 rounded d-inline-block">
              <div class="messageText">Hello!</div>
              <div class="messageStatus"></div>
            </div>
          </div>
          <div class="messageContainer mt-2 overflow-hidden">
            <div class="message bg-white text-dark px-2 py-1 w-75 rounded d-inline-block float-right">
              <div class="messageText text-break">Hello!HelloHelloHelloHelloHelloHelloHelloHelloHello</div>
              <div class="messageStatus float-right">
                <svg class="bi bi-check-all" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="" clip-rule="evenodd"/>
                    <path d=""/>
                 </svg>
              </div>
            </div>
          </div>
        </div>
        <div class="container-lg">
           <div class="row p-2">
              <input type="text" class="form-control col col-sm col-md col-lg">
              <button class="btn col-auto col-sm-auto col-md-auto col-lg-auto">
                 <svg class="bi bi-triangle rotate invert" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="" clip-rule="evenodd" />
                 </svg>
              </button>
           </div>
        </div>         
     </div>
</body>

    • 2

相关问题