如何使我的可滚动面板以响应式设计填充整个屏幕到页脚？ （用于移动界面） [英] How do I make my scrollable panel to fill the entire screen down to the footer with responsive design? (for mobile interface)

问题描述

我正在做我的结果页面的移动版本，因此它必须对每个移动设备都做出响应，但我不知道如何让我的面板（可滚动的）填充屏幕到页脚，而不管是什么手机是用户应该看起来一样。
如果我尝试用px或vh修复面板的高度，它对所有设备都不一样，所以它没有响应，如果我尝试设置％值，我不能让我的面板可以滚动了，任何想法？

以下是代码：

CSS

  list_mobile {
 
 .result {
 height：border-box; 
} 
 .footer {
 position：fixed; 
宽度：100％; 
 bottom：0; 
身高：5vh; 
 background：skyblue; 
颜色：黑色; 
} 
} 
 
 .res_mobile {
 height：57vh; 
 overflow：scroll; 
 overflow-x：hidden; 
} 
  

HTML $ b

 < 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>结果< / span> 
< / h4> 
< / div> 
< div class =panel-collapse collapse in> 
 <！ -   - 内容 - > 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
 
< div class =row list_mobile> 
< footer class =footer> 
< p>结果数量：55< / p> 
< / footer> 
< / div> 
  

解决方案

更改.footer类样式

  .res_mobile {height：57vh;溢出：滚动; overflow-x：hidden;}。footer {position：fixed;左：0;底部：0;宽度：100％;背景颜色：红色;白颜色; 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> <跨度>结果< /跨度> < / H4> < / DIV> < div class =panel-collapse collapse in> <！ - 内容 - > < / DIV> < / DIV> < / DIV> < / DIV> < / div>< / div>< div class =row list_mobile> < footer class =footer> < p>结果数目：55< / p> < / footer>< / div>  

I am doing a mobile version of my result pageso it has to be responsive for every mobile devices, but i don't know how to make my panel(who is scrollable) fill the screen down to the footer no matter on what mobile is the user it should look the same. if i try to fix the height of the panel with px or vh it's not the same for all device so it's not responsive and if i try to set a % value i can't make my panel scrollable anymore, any idea ?

Here's the code:

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>

解决方案

Change .footer class Style

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

这篇关于如何使我的可滚动面板以响应式设计填充整个屏幕到页脚？ （用于移动界面）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！