具有固定位置的页脚覆盖元素

Question

我创建了一个网页，其中包含内容和带有position: fixed属性的页脚（青色背景）。从某种意义上说，页脚始终在页面底部可见，但是在调整窗口大小并包装某些项目后，内容的高度会增加，然后页脚仍会保留在页面底部，但是部分内容。

这是页面足够大以包含所有元素的时候：

这是页面缩小的时候：绿色列发送到红色和橙色元素下方。页脚始终保留在底部，并覆盖了部分绿色容器。

我想避免这种情况。页脚必须在页面底部，但不能覆盖任何元素。

部分代码：

html

<div class="row" id='footerRow'>

    <div class="column" id='col2F'>

    </div>

    <div class="column" id='col1F'>

    </div>

    <div class="column" id='col3F'>

    </div>

</div>

css

#footerRow {
    color: black;
    background-color: var(--cCyan);
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 5px;
}
#footerRow:after {
    content: "";
    display: table;
    clear: both;
}

#footerRow .column {
    float: left;
}

简化代码：CODE。

我也尝试：

window.onresize = onResizeWindow;
window.onload = onResizeWindow;

function onResizeWindow() {
    displayWindowSize();
    changeMarginFooter();
}

function displayWindowSize() {
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
    // your size calculation code here
    document.getElementById("dimensions").innerHTML = myWidth + "x" + myHeight;
}

/*
The problem is that fixed position takes it out of document flow. 
You can add margin-bottom to the body content equal to the height of #Footer. 
This will ensure that there is always an empty space behind the footer equal 
to its height, preventing it from overlapping the content.
 */
function changeMarginFooter() {
    // get current height of #footer (including padding, scrollBar and borders)
    var heightFooter = document.getElementById('footer').offsetHeight;
    var heightFooterPx = heightFooter + 'px';
    console.log('heightFooter:', heightFooter, 'heightFooterPx:', heightFooterPx);
    // set margin-bottom to the body content equal to the height of #footer
    $("#main").css("margin-bottom", heightFooterPx);
}

但这不起作用。

Answer 1

您应该知道固定的位置是相对于视口的，而不是相对于主体或htlm的，因此当您设置bottom：0时；这意味着该页脚的底部边缘将粘贴到视口的底部，如果主体溢出滚动中的内容不会对页脚产生影响，那么从底部粘贴该标签的唯一方向就是上方根据屏幕尺寸的不同，如果没有空间，页脚将在其上方生长，从而隐藏了元素，因此，如果您不希望它隐藏元素，则不是这样做的方法。

如果我有什么建议，请在主包装中添加页脚，位置绝对，并使用top:100%将其完全从主容器中推出，使其看起来像在主容器下方，并且不会重叠内容。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main {
  height: 1800px;
  background-color: pink;
  position: relative;
}


/* Content in the footer varies */

#col2F {
  height: 300px;
}

#col1F {
  height: 200px;
}

#col3F {
  height: 450px;
}

#footerRow {
  color: black;
  background-color: #ff002d;
  position: absolute;
  /* Can go above 100% if you want space in between */
  top: 100%;
  width: 100%;
  padding: 5px;
  display: flex;
}

#footerRow .column {
  flex: 1;
  border: 1px solid;
}

<div class="main">

  <div class="row" id='footerRow'>

    <div class="column" id='col2F'>

    </div>

    <div class="column" id='col1F'>

    </div>

    <div class="column" id='col3F'>

    </div>

  </div>
</div>

Answer 2

尝试一下

使用position: relative;代替position: fixed;

#footer {
    width: 100%;
    position: relative; //remove fixed 
    bottom: 0;
    background-color: var(--cDarkGrey);
    color: white;
    padding: 5px;
    flex-shrink: 0;
}