时间戳

首页 > 解决方案 > div 应取屏幕高度减去（页眉+页脚和其他 div 的高度）

html - div 应取屏幕高度减去（页眉+页脚和其他 div 的高度）

问题描述

我的 html 页面包含一个页眉、两个 div（比如 div1 和 div2）和一个页脚。我为页眉、一个 div 和页脚指定了高度。现在，我希望另一个 div 采用任何屏幕（手机、平板电脑、桌面。更大的桌面等）的垂直高度减去页眉、div1 和页脚的组合高度，即 div2 的高度 = 屏幕的高度-（页眉的高度+ div1 的高度 + 页脚的高度）带有滚动条。在 div 2 中，我正在展示带有一些信息的卡片，就像使用 JavaScript 动态附加的聊天应用程序（whatsapp）一样。在第三个 div 中，我将动态创建的聊天附加到 id 为“chat-body”的 div。

我正在尝试calc(100vh - (combined height of header+div1+footer))。它适用于桌面，但对于较小的屏幕，第三个 div 的滚动条进入页脚。

<header class="topBar">
  <ul class="nav nav-tabs row" id="myTab" role="tablist">
    <li class="nav-item col">
      <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true" style="padding-top: 20px; font-size: 14px; cursor: pointer;" onclick="chat()">Chat</a>
    </li>
    <li class="nav-item col">
      <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false" style="padding-top: 20px; font-size: 14px; cursor: pointer;" onclick="ticketStatus()">Incident</a>
    </li>
    <li class="nav-item col">
      <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false" style="padding-top: 20px; font-size: 14px; cursor: pointer;" onclick="ticketStatus()">Service Request</a>
    </li>
  </ul>

</header>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
    <div class="container">
      <div class="row h-100">
        <div id="topButtons" class="card-body" style="padding-bottom: 0;"></div>
        <div id="chatBody" class="card-body anyClass" onscroll="myFunction()">
          <p class="WC_message_fl"><img class="con_im" src="images\chatrobo.png"></p>
          <p class="WC_message_fl sahlaIntro"> Type your Questions & Start chatting with Sahla bot.</p>
          </br>
          </br>
        </div>

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

  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    </br>
    </br>
    <p class="WC_message_fl" id='msg_table'></p>
    <div class="container" style="overflow-x:hidden;overflow-y:auto;height:84vh;">
      <div class="row" id="table"></div>
    </div>

  </div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
    </br>
    </br>
    <p class="WC_message_fl" id='msg_sr_table'></p>
    <div class="container" style="overflow-x:hidden;overflow-y:auto;height:84vh;">
      <div class="row" id="sr_table"></div>
    </div>
  </div>

</div>

<footer class="footr" id="footerChtbt">
  <div id="myBtn" onclick="topFunction()"><img title="Go to top" src="images/GOTOTOP.png" style="width:65px;height:65px;"></div>
  <div class="input-group" style="width: 90% !important;">
    <input id="query" type="text" class="dir-auto form-control" placeholder="Ask Sahla bot..." onkeyup="pressedkey(event)" style="outline:0;box-shadow:none;border-width:0px;font-size:14px;" required>
    <div class="input-group-append" style="margin-left: 1%;">
      <img src="images/send_icon.svg" name="submitbtn" id="submitbtn" onClick="sendbtn()" style="cursor: pointer;">
    </div>
  </div>

</footer>

标签： htmlcss

解决方案

尝试使用 100% 而不是 100vh 例如：height: calc(100% - number)

推荐阅读