我想在底部有一个页脚。一开始,我使用position: fixed
.page-foot {
position: fixed;
bottom: 0;
width: 100%;
background: #F6F6F6;
height: 400px;
border-top: 1px solid #eee;
}
但是使用这种方式,我遇到了一些问题,比如在 Chrome 开发者工具上调试,我看不到 html 文件的其他部分,因为我的页脚很大。
我研究了他们的源代码并看到了 Quora如下使用 float 的页面
.page-foot {
float: left;
position: relative;
border-top: 1px solid #eee;
background: #f6f6f6;
width: 100%;
min-width: 1020px;
height: 400px;
}
这是我可以使用 Chrome 开发者控制台调试页脚的示例图片:
当我缩小页面时,页脚仍然在页面底部:
这个方法可以解决上面的问题(调试的时候可以滚动到其他部分)。但如果其他内容(如页眉+主要内容)有足够的空间,页脚就位于页面下方,并且该页脚会遮挡主要内容的某些内容。
我看到 Quora 没有遇到这个问题。他们的页脚总是在底部,没有覆盖主要内容。
我想知道他们是怎么做到的?
谢谢:)
最佳答案
您需要给您的内容区域 padding-top
,它等于 header 的 高度,而 padding-bottom
等于页脚的高度。
关于html - CSS:使用 float 作为 Quora 页面底部的页脚膨胀,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30407428/