如何让我的面板填充屏幕到页脚? [英] How do I make my panel to fill the screen down to the footer?

查看：19
本文介绍了如何让我的面板填充屏幕到页脚?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我希望我的面板占据整个屏幕直到页脚，即使面板是空的.如果面板已填满，我想滚动查看内容，但页脚应始终在页面底部可见.你有什么想法吗?这是代码:

.list_mobile .footer {位置:绝对；底部:0；右:0；宽度:100%；高度:60px；背景:浅蓝；颜色:深红色；}

<div class="col-xs-12 col-sm-12 col-lg-12 mg-tp-xs"><div class="panel panel-danger" style="overflow :scroll"><div class="panel-heading"><h4 class="panel-title"><span>结果</span>
<div class="panel-collapse"><div class="panel-body"><p>测试</p>

<div class="list_mobile"><footer class="footer"><div class="容器"><h4>结果数:55个</h4>

</页脚>

解决方案

Bootstrap 已删除 *-xs-* 类的所有变体.使用 col-12 代替 col-xs-12.由于列对于所有大小都是 100%，因此使用 col-12 就足够了.

<小时>

  1. 使用 d-flex flex-column h-100 作为行的父级.
  2. 对行使用 flex-grow-1.
  3. 行的所有父行都必须具有 100% 的高度，包括正文和 html.
  4. col-12 和 panel 必须具有 100% 高度.
  5. 使用 row 作为页脚.
  6. 不要改变footer的位置:删除position:absolute；底部:0；右侧:0；

html,身体 {高度:100%；}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="样式表"/><div class="container-fluid d-flex flex-column h-100 bg-primary"><div class="row flex-grow-1"><div class="col-12 bg-danger h-100"><div class="panel panel-danger h-100"><div class="panel-heading"><h4 class="panel-title"><span>结果</span>

<div class="panel-collapse"><div class="panel-body"><p>测试</p>

<div class="row"><footer class="col-12 footer"><div class="容器"><h4>结果数:55个</h4>

</页脚>

您可以使用 container 代替 container-fluid.它没有任何区别.如果您这样做，请移除页脚中的容器.

html,身体 {高度:100%；}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="样式表"/><div class="container d-flex flex-column h-100 bg-primary"><div class="row flex-grow-1"><div class="col-12 bg-danger h-100"><div class="panel panel-danger h-100"><div class="panel-heading"><h4 class="panel-title"><span>结果</span>

<div class="panel-collapse"><div class="panel-body"><p>测试</p>

<div class="row"><footer class="col-12 footer"><h4>结果数:55个</h4></页脚>

I want my panel to take up all the screen until the footer even if the panel is empty. If the panel is filled I want to scroll to see the content, but the footer should always be visible at the bottom of the page. Have you got an idea ? Here is the code :

.list_mobile .footer {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 60px;
  background: lightskyblue;
  color: darkred;
}

<div class="row">
  <div class="col-xs-12 col-sm-12 col-lg-12 mg-tp-xs">
    <div class="panel panel-danger" style="overflow :scroll">
      <div class="panel-heading">
        <h4 class="panel-title">
          <span>Result</span>
        </h4>
      </div>
      <div class="panel-collapse">
        <div class="panel-body">
          <p>test</p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="list_mobile">
  <footer class="footer">
    <div class="container">
      <h4>number of results : 55 </h4>
    </div>
  </footer>
</div>

解决方案

Bootstrap has removed all the variants of *-xs-* classes. Instead of, col-xs-12, use col-12. Since the column is 100% for all sizes, it is enough to use col-12.

  1. Use d-flex flex-column h-100 for the parent of the row.
  2. Use flex-grow-1 for the row.
  3. All the parents of row must have 100% height including body and html.
  4. col-12 and panel must have 100% height.
  5. Use a row for the footer.
  6. Do not change position of footer: remove position: absolute; bottom: 0;right: 0;

html,
body {
  height: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container-fluid d-flex flex-column h-100 bg-primary">
  <div class="row flex-grow-1">
    <div class="col-12  bg-danger h-100">
      <div class="panel panel-danger h-100">
        <div class="panel-heading">
          <h4 class="panel-title">
            <span>Result</span>
          </h4>
        </div>
        <div class="panel-collapse">
          <div class="panel-body">
            <p>test</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <footer class="col-12 footer">
      <div class="container">
        <h4>number of results : 55 </h4>
      </div>
    </footer>
  </div>
</div>

You can use container instead of container-fluid. It does not make any difference. Buy if you do so,remove the container that is in the footer. 

html,
body {
  height: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container d-flex flex-column h-100 bg-primary">
  <div class="row flex-grow-1">
    <div class="col-12  bg-danger h-100">
      <div class="panel panel-danger h-100">
        <div class="panel-heading">
          <h4 class="panel-title">
            <span>Result</span>
          </h4>
        </div>
        <div class="panel-collapse">
          <div class="panel-body">
            <p>test</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <footer class="col-12 footer">
        <h4>number of results : 55 </h4>
    </footer>
  </div>
</div>

这篇关于如何让我的面板填充屏幕到页脚?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆