如上图所示,我的页脚获得的负载为100%宽度,但不是页面的最底部,因为我是HTML / CSS的新手,所以我已经花了一个小时了,但是仍然无法解决,表单从页面视图中过度扩展,因此当我向下滚动到底部时,“注册”按钮后的间距也很小...我该如何解决呢?
这是我的代码示例
.center-page {
width: 400px;
height: 400px;
position: absolute;
top: -40px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.footer-pos {
width: auto;
height: auto;
position: absolute;
top: 860px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div>
<div class=navbar>
NAVBAR CONTENTS
</div>
<div class="center-page">
ALL MY "label" and ASP "input" and Sign Up "button"
</div>
</div>
<div>
<footer class="footer-pos">
<div> © 2018 Copyright: HRCA </div>
</footer>
</div>
我正在使用bootstrap 4.1.3(bootstrap.min.css),这是我自定义的CSS代码,用于内容(中间页)和页脚
答案 0 :(得分:0)
将这两个元素都定位为绝对位置是您的问题所在。您的身体不应完全按照设置的方式进行定位。
答案 1 :(得分:0)
CSS:
.footer-pos {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
HTML:
<div class=navbar>
NAVBAR CONTENTS
</div>
<div class="center-page">
ALL MY "label" and ASP "input" and Sign Up "button"
</div>
<div class="footer-pos">
© 2018 Copyright: HRCA
</div>
top在把东西推到中间。
答案 2 :(得分:0)
您正在完全定位页脚,并为其指定一个最高值,该最高值将确定页脚从页面开始向下的位置。如果仅删除该值,则底部值(0)将从下至上对其进行定位。
对于注册按钮,请尝试在父元素的底部添加一些填充(我想这是此处的元素),即padding-bottom:50px。
CSS可能很挑剔,但您会掌握它的!
答案 3 :(得分:0)
感谢大家的帮助和贡献!
我已经通过参考bootstrap粘性页脚模板解决了这个问题! https://getbootstrap.com/docs/4.1/examples/sticky-footer-navbar/
我将HTML正文更改为
<div class="navbar navbar-expand-lg navbar-dark bg-dark" role="navigation">
NAVBAR
</div>
<div class="container center-page">
CONTENT
</div>
<footer class="footer">
<div class="container">
© 2018 Copyright: HRCA
</div>
</footer>
而且还具有最少的自定义CSS样式!
.center-page {
width: 300px;
padding-top:50px;
padding-bottom: 50px;
}
答案 4 :(得分:0)
您应该这样做:
.footer-pos {
position: fixed;/*To make it always be at that point.*/
top: 100%;/*to make it 100% at the bottom*/
transform: translate(0%, -100%);/*To make sure it will calculate from the bottom*/
}