我创建了一个网页,其中包含内容和带有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);
}
但这不起作用。
答案 0 :(得分:0)
您应该知道固定的位置是相对于视口的,而不是相对于主体或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>
答案 1 :(得分:0)
尝试一下
使用position: relative;
代替position: fixed;
#footer {
width: 100%;
position: relative; //remove fixed
bottom: 0;
background-color: var(--cDarkGrey);
color: white;
padding: 5px;
flex-shrink: 0;
}