如何让我的面板将屏幕填满页脚? [英] How do I make my panel to fill the screen down to the footer?
问题描述
我希望我的面板占据所有屏幕直到页脚即使面板为空。
如果面板已填满,我想滚动查看内容,但页脚底部应始终显示页脚。
你有个主意吗?
以下是代码:
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删除了 * - xs - *
类的所有变体。而不是 col-xs-12
,使用 col-12
。由于所有尺寸的列都是100%,因此使用 col-12
就足够了。
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
.
- 使用
d-flex flex-column h-100
作为父母的行。 - 对行使用 flex-grow-1 。
- 行的所有父项必须为100%高度包括正文和html。
-
col-12
和面板
必须100%
身高。 - 使用 <$ c页脚的$ c>行 。
- 不要更改
页脚的位置
:removeposition:absolute;底部:0;右边:0;
- Use
d-flex flex-column h-100
for the parent of the row. - Use flex-grow-1 for the row.
- All the parents of row must have 100% height including body and html.
col-12
andpanel
must have100%
height.- Use a
row
for the footer. - Do not change position of
footer
: removeposition: 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>
您可以使用 container
而不是 container-fluid
。它没有任何区别。如果您这样做,请删除页脚中的容器。
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屋!