Question

我的html页面包含一个页眉，两个div（例如div1和div2）和一个页脚。我已将页眉，一个div和页脚的高度设置为高。现在，我希望另一个div取任何屏幕（电话，平板电脑，台式机，更大的台式机等）的垂直高度减去标题，div1和页脚的总高度，即div2的高度=屏幕的高度-（标题的高度） + div1的高度+页脚的高度）和滚动条。在div 2内，我正在向卡片显示一些信息，就像聊天应用程序（whatsapp）一样，该应用程序使用JavaScript动态添加。在第三个div中，我将动态创建的聊天附加到id为“ chat-body”的Div。

我正在尝试calc(100vh - (combined height of header+div1+footer))。对于台式机来说效果很好，但对于较小的屏幕，第三格的滚动条位于页脚内。

<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>

Answer 1

使用100％代替100vh尝试一次例如：高度：calc（100％-数字）

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

1 个答案: