如何解决页脚位置每次都改变
我一直在尝试创建一个可重复使用的页脚组件,并希望将其放置在底部,而不管页眉和页脚之间的内容如何,但对于某些页面,它停留在底部,而某些页面则位于顶部或中间.
有人可以帮我解决这个问题吗?
app.component.html
<custom-theme>
<div class="">
<div class="">
<div class="">
<menu></menu>
</div>
<div class="">
<breadcrumb></breadcrumb>
<div class="app-header">
<img />
<div class="header-icon">
<img alt="Language" class="header-icon-image"/>
<div class="header-icon-text"</div>
</div>
<div class="header-icon-container">
<img class="header-icon"/>
<div class="header-icon-text"</div>
</div>
</div>
<div class="app-container">
<router-outlet class="col-12"></router-outlet>
</div>
<div class="app-footer">
<footer></footer>
</div>
</div>
</div>
</div>
</custom-theme>
app.component.css
.app-container {
position: relative;
left: 35px;
width: 98%;
top: 50px;
}
.app-header {
background: #f4f4f4;
/* left: 40px; */
position: absolute;
top: 0;
height: 50px;
z-index: 1;
width: 100%;
}
.app-footer {
position: absolute;
bottom: 0;
height: 20px;
z-index: 1;
width: 98%;
clear: both;
}
页脚.组件
<div class="container">
<div class="dateinfo">
<p>Date</p>
</div>
<div class="imprint">
<p>imprint</p>
</div>
</div>
Footer.component.css
.container {
padding: 10px;
}
.dateinfo{
margin-left: 42px;
float: left;
font-size: 16px;
}
.imprint {
margin-right: 30px;
float: right;
font-size: 16px;
}
解决方法
你应该把你的整个组件包装到一个容器中,最小高度:100%,位置:相对。保持你的 app.footer 类不变。有关详细信息,请阅读此 Article
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。