页脚与上面的内容重叠 [英] Footer overlaps content above it

问题描述

我将页脚粘贴到页面底部，但是不知何故它无法保持前一个元素的流动，该元素现在很可能位于(在Z轴上)页脚下方.页脚应低于 .center-main 元素.但是，该属性具有绝对属性，导致其中一种都不适合页面中心-当"position:absolute"除外时，它位于 .cat-menu 元素下方，但页脚仍与之重叠.

I sticked footer to bottom of page, but somehow it doesn't keep flow of previous element, which is now likely below (in Z axis) footer. Footer should be just lower than .center-main element. However that one has absolute property, cause either way it doesn't fit in center of page - when other than 'position: absolute' it is below .cat-menu element, BUT footer still overlaps it.

问题CSS部分:

.cat-menu
{
    width: 20%;
    margin: 3px;
    display: inline-block;
    border:1px solid blue;

}

.center-main
{
    width: 79%;
    position: absolute;
    margin: 3px;
    display: inline-block;
    border: 1px solid red;
}

footer
{
    clear: both;
    border: 2px solid red;
    text-align: center;
    position: fixed;
    display: block;
    bottom: 0;
    width: 99.7%;
}

整个页面: https://jsfiddle.net/tnmmoLnq/1/(页面中心的那些按钮在jsfiddle上的位置不正确-在我的PC上是可以的).

Whole page: https://jsfiddle.net/tnmmoLnq/1/ (those buttons at center of page are bad positioned on jsfiddle - on my PC they are ok).

推荐答案

您的固定页脚将始终与容器重叠(除非(容器)具有 height 放).您需要做的是创建一个页脚将重叠的 exer-container ，并使用一个 marin-bottom 相同的 inner-container 高度作为页脚.

Your fixed footer will always be overlapping the container (unless it (the container) has a height set). What you need to do is create an outer-container that the footer will overlap, and an inner-container with a marin-bottom the same height as your footer.

FIDDLE

.center-main-inner
{
    width: 79%;
    position: relative;
    margin: 3px;
    display: inline-block;
    border: 1px solid #0000FF;
    margin-bottom:20px;
}

这是静态的-非固定版本:

And here is static -- non fixed version:

更新了小提琴

这篇关于页脚与上面的内容重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！