时间戳

首页 > 解决方案 > 如何使用响应式设计使我的可滚动面板将整个屏幕填充到页脚？（用于移动界面）

css - 如何使用响应式设计使我的可滚动面板将整个屏幕填充到页脚？（用于移动界面）

问题描述

我正在做我的结果页面的移动版本，所以它必须对每个移动设备做出响应，但我不知道如何让我的面板（谁是可滚动的）填充屏幕到页脚，无论在什么移动设备上用户它应该看起来一样。如果我尝试使用 px 或 vh 修复面板的高度，那么它对于所有设备都不相同，因此它没有响应，如果我尝试设置 % 值，我将无法再使我的面板可滚动，有什么想法吗？

这是代码：

CSS

    list_mobile {

  .result {
  height: border-box;
  }
  .footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    height: 5vh;
    background: skyblue;
    color: black;
  }
}

.res_mobile {
  height: 57vh;
  overflow: scroll;
  overflow-x: hidden;
}

HTML 

<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <div class="panel panel-info">
        <div class="panel-heading">
          <h4 class="panel-title">
            <span>Results</span>
          </h4>
        </div>
          <div class="panel-collapse collapse in">
            <!-- content -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row list_mobile">
  <footer class="footer">
    <p>number of results : 55 </p>
  </footer>
</div>

标签： csshtmlbootstrap-4

解决方案

更改 .footer 类样式 

.res_mobile {
  height: 57vh;
  overflow: scroll;
  overflow-x: hidden;
}
.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: red;
   color: white;
   text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <div class="panel panel-info">
        <div class="panel-heading">
          <h4 class="panel-title">
            <span>Results</span>
          </h4>
        </div>
        <div class="panel-collapse collapse in">
          <!-- content -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row list_mobile">
  <footer class="footer">
    <p>number of results : 55 </p>
  </footer>
</div>

推荐阅读