网页页脚确实重叠

问题描述

当我在搜索栏中搜索项目时，该项目与我的页脚底部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>

谢谢：）

解决方法

这可以解决问题，如果我遇到您的问题？

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

由于您在flex中使用.footer，因此在这种情况下必须指定flex-direction，以使.footer-bottom与{{1} }。还要从.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

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。另外，页脚不透明。

html javascript navbar searchbar

网页页脚确实重叠

问题描述

解决方法

相关问答