网页页脚确实重叠

Question

当我在搜索栏中搜索项目时，它与我的页脚底部div重叠。我如何克服这个问题？我试图修复页脚底部的div总是在底部，但它似乎不起作用，当我搜索一个项目时，它仍然与该div重叠

有什么想法吗？以下所有必需的代码：

var UL = document.getElementById("myMenu");
UL.style.display = "none";
var searchBox = document.getElementById("mySearch");
searchBox.addEventListener("focus",  function(){
});
searchBox.addEventListener("blur", function(){
if( inst.settings.clickOffToClose ) {
_addEvent( inst.wrapper, "click", function(e) {
e.preventDefault(); if(e.target == inst.wrapper) inst.close();
}, false );
}
UL.style.display = "none";
});
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("mySearch");
ul = document.getElementById("myMenu");
filter = input.value.toUpperCase();
if(filter.trim().length < 1) {
ul.style.display = "none";
return false;
} else {
ul.style.display = "block";
}
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}

.footer {
background: white;
color: #d3d3d3;
height: 250px;
display: flex;
position: static;
bottom: 0px;
width: 100%;
padding: 38px;
}
.footer .footer-content {
font-size: 1.6em;
font-weight: bold;
line-height: 1.6;
}

.footer .footer-bottom {
background: #343a40;
color: #686868;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
padding: 20px;
width: 100%;
}
.footer .footer-content a {
color: grey;
text-decoration: none;
transition: color 1s;
}
#mySearch {
width: 100%;
font-size: 18px;
padding: 11px;
border: 1px solid #ddd;
display: block;
}
#myMenu {
list-style-type: none;
padding: 0;
margin: 0;
}
#myMenu li a {
padding: 12px;
text-decoration: none;
color: black;
display: table;
}
#myMenu li a:hover:not(.header) {
background-color: #eee;
}

<div class="footer">
<div class="footer-content">
<input type="text" id="mySearch" onkeyup="myFunction()" placeholder="search.." title= "type in a name">
<ul id="myMenu">
<li><div class="footer-section-about">
<a href = "index.html">1</a></div></li>
<li><div class="footer-section-links">
<a href = "aboutt.html">2</a></div></li>
<li><div class="footer-section-contact-form">
<a href = "contact.html">3</a></div></li>
<li><div class = "footer-section-produsechicken">
<a href = "produsechicken.html">4</a></div></li>
<li><div class = "footer-section-sfaturichicken">
<a href = "sfaturichicken.html">5</a></div></li>
<li><div class = "footer-section-produsepig">
</ul>
</div>
<div class="footer-bottom">
&copy; xxx
</div>
</div>

谢谢：(

Answer 1

由于在.footer中使用flex，因此在这种情况下必须指定flex-direction，以便.footer-bottom不会与.footer-content重叠。此外，从.footer-bottom中删除绝对定位，因为你有弯曲方向，所以你不再需要它了。

.footer {
background: white;
color: #d3d3d3;
height: 250px;
display: flex;
flex-direction: column; /* Add this*/
position: static;
bottom: 0px;
width: 100%;
padding: 38px;
}

你的.footer-bottom应该是这样的：

.footer .footer-bottom {
background: #343a40;
color: #686868;
text-align: center;
/* Removed position absolute*/
bottom: 0px;
left: 0px;
padding: 20px;
width: 100%;
}

Answer 2

这可能会奏效，如果我明白你的问题？

#myMenu {
position: relative;
z-index: 2;
}

Answer 3

var UL = document.getElementById("myMenu");
UL.style.display = "none";
var searchBox = document.getElementById("mySearch");
searchBox.addEventListener("focus",  function(){
});
searchBox.addEventListener("blur", function(){
if( inst.settings.clickOffToClose ) {
_addEvent( inst.wrapper, "click", function(e) {
e.preventDefault(); if(e.target == inst.wrapper) inst.close();
}, false );
}
UL.style.display = "none";
});
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("mySearch");
ul = document.getElementById("myMenu");
filter = input.value.toUpperCase();
if(filter.trim().length < 1) {
ul.style.display = "none";
return false;
} else {
ul.style.display = "block";
}
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}

.footer {
background: white;
color: #d3d3d3;
height: 250px;
display: flex;
position: static;
bottom: 0px;
width: 100%;
padding: 38px;
margin: 0 0 46px 0;
}
.footer .footer-content {
font-size: 1.6em;
font-weight: bold;
line-height: 1.6;
}

#footer-bottom {
background: #343a40;
color: #686868;
text-align: center;
position: fixed;
bottom: 0px;
left: 0px;
padding: 20px;
width: 100%;
z-index: 2;
}
.footer .footer-content a {
color: grey;
text-decoration: none;
transition: color 1s;
}
#mySearch {
width: 100%;
font-size: 18px;
padding: 11px;
border: 1px solid #ddd;
display: block;
}
#myMenu {
list-style-type: none;
padding: 0;
margin: 0;
}
#myMenu li a {
padding: 12px;
text-decoration: none;
color: black;
display: table;
}
#myMenu li a:hover:not(.header) {
background-color: #eee;
}

<div class="footer">
<div class="footer-content">
<input type="text" id="mySearch" onkeyup="myFunction()" placeholder="search.." title= "type in a name">
<ul id="myMenu">
<li><div class="footer-section-about">
<a href = "index.html">1</a></div></li>
<li><div class="footer-section-links">
<a href = "aboutt.html">2</a></div></li>
<li><div class="footer-section-contact-form">
<a href = "contact.html">3</a></div></li>
<li><div class = "footer-section-produsechicken">
<a href = "produsechicken.html">4</a></div></li>
<li><div class = "footer-section-sfaturichicken">
<a href = "sfaturichicken.html">5</a></div></li>
<li><div class = "footer-section-produsepig">  </div>
</ul>
<div id="footer-bottom">&copy; xxx</div>
</div>

你好，你需要使用position:fixed，然后使用bottom: 0;。然而，这将与其他div的内容发生冲突。要解决此问题，必须确保这些内容的下边距至少为页脚高度，并且页脚的z-index比其余内容高。此外，页脚是不透明的。