网页页脚确实重叠

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

这可能会成功，如果我遇到你的问题？

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

Answer 2

由于您在 .footer 中使用 flex，您必须在这种情况下指定 flex-direction，这样 .footer-bottom 就不会与 .footer-content。还要从 .footer-bottom 中删除绝对定位，你将不再需要它，因为你有 flex-direction.

.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 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。还有就是页脚不是透明的。

网页页脚确实重叠

Web Page Footer does overlap

html

javascript

css

navbar

searchbar