删除页脚下的小空白

Question

我一直在寻找解决方法，以解决出现在页脚下方的一小部分空白，但似乎无济于事。 我试过操纵margin-bottom padding-bottom无济于事。

带有页脚的网站位于： 网站

该页脚的类名称为“ footerWrapper”，我希望使用浏览器DOM编辑器可以使您对情况有更好的了解，如果我刚刚发布的代码不完整。 我已经尝试了很长时间来解决此问题，任何建议都将不胜感激。

编辑：在下面添加了代码（我PHP“包括”了很多代码，包括创建奇怪格式的我的页脚。这可能是我的问题吗？）

<body class="body1">
        <div class="borderLine"></div>
        <div class="banner"></div>

        <div class="mainContent1">
            <div class="header1">
                <div class="headerContainer">

<div class="headerPanelOuter">
    <div class="headerPanel">

        <p class="panelWelcome">Welcome,
            log in or sign up!        </p>

        <div class="panelButton" id="logInBut">
            <span>log in</span>
        </div>

        <form name="LogOutForm" id="LogOutForm" method="post" action="/app/newstuff.php" style="z-index: 5;">
            <div class="panelButton" style="top: 34px;" onclick="SubmitLogOutForm()">
                <span>log out</span>
            </div>
            <input name="LogOutState" type="hidden" value="1">
        </form>

        <div class="panelButton" onclick="location.href='signup.php';" style="top: 64px;">
            <span>sign up</span>
        </div>

        <div class="panelButton" onclick="location.href='useraccount.php';" style="left: 4px; width: 90px;">
            <span>my account</span>
        </div>

    </div>
</div>

<img class="KELogo" src="/../../images/PRLogo(header).png" alt="Logo"> 
<img class="KETitleLogo" src="/../../images/KENameLogo(header32).png" alt="People\'s Robotics">

<div id="blackBackg" style="display: none;"></div>
<div id="LogInBox" style="display: none;"> 
<p id="logEscape" onclick="">x</p>
<p id="logInTitle">Log In</p>
<div id="linediv2"></div>
    <form name="logInForm" id="logInForm" method="post" action="/app/newstuff.php" style="z-index: 5;">
        <span id="emailField">E-mail:</span>
        <br><input id="logEmail" type="text" style="height:  28px;" name="logEmail" value="" onfocus="inputFocus(this)" onblur="inputBlur(this)"> <br><br>
        <span id="passField">Password:</span> <br>
        <input id="logPass" type="password" style="height:  28px;" name="logPass" value="" onfocus="inputFocus(this)" onblur="inputBlur(this)"> <br><br>
        <input id="logSubmit" type="submit" name="logSubmit" value="Log In"> 
    </form>
</div>

<ul class="navList1">
    <li><a id="B0" href="/app/newstuff.php" style="background-color: rgb(30, 96, 217); color: rgb(249, 249, 249);">New Stuff</a></li>
    <li><a id="B1" href="/app/products.php">Products</a></li>
    <li><a id="B2" href="/app/projects.php">Projects</a></li>
    <li><a id="B3" href="/app/faq.php">FAQ</a></li> 
    <li><a id="B4" href="/app/cart.php">My Cart</a></li>
</ul>
                </div>
            </div>

            <div class="content1"> 
                <div id="NSDiv1">

    <div id="NSContentContainer">
    <section class="slider">
      <div class="flexslider">
        <ul class="slides">
          <li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1; display: block; z-index: 2;" class="flex-active-slide" data-thumb-alt="">
            <img src="/images/sh3.jpg" alt="1" draggable="false">
          </li>
          <li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;" data-thumb-alt="">
            <img class="lazy" data-src="/images/sh1.jpg" alt="2" draggable="false" src="/images/sh1.jpg">
          </li>
          <li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;" data-thumb-alt="">
            <img class="lazy" data-src="/images/sh2.jpg" alt="3" draggable="false">
          </li>
        </ul>
      <ol class="flex-control-nav flex-control-paging"><li><a href="#" class="flex-active">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li></ol><ul class="flex-direction-nav"><li class="flex-nav-prev"><a class="flex-prev" href="#">Previous</a></li><li class="flex-nav-next"><a class="flex-next" href="#">Next</a></li></ul></div>
    </section>
    </div>

    <div id="NSContentContainer" style=" top:  45px; left:  13px; width: 525px; height:  250px;z-index: 6;">
    </div>

</div>

<!-------------------- DIV2----------------- -->
<div id="NSDiv2">

    <div id="NSContentContainer" style="height:  250px;">
    </div>

     <div id="NSContentContainer" style=" top:  45px; left:  13px; width: 525px; height:  400px; ">
         <section class="slider">
      <div class="flexslider">
        <ul class="slides">
          <li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1; display: block; z-index: 2;" class="flex-active-slide" data-thumb-alt="">
            <img src="/images/sh2.jpg" alt="1" draggable="false">
          </li>
          <li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;" data-thumb-alt="">
            <img class="lazy" data-src="/images/sh3.jpg" alt="2" draggable="false" src="/images/sh3.jpg">
          </li>
          <li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;" data-thumb-alt="">
            <img class="lazy" data-src="/images/sh1.jpg" alt="3" draggable="false">
          </li>
        </ul>
      <ol class="flex-control-nav flex-control-paging"><li><a href="#" class="flex-active">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li></ol><ul class="flex-direction-nav"><li class="flex-nav-prev"><a class="flex-prev" href="#">Previous</a></li><li class="flex-nav-next"><a class="flex-next" href="#">Next</a></li></ul></div>
    </section>
     </div>

</div>



            </div>
        </div>
        <div class="footerWrapper">
    <div class="footerInnerContainer">
        <div id="footerSection1">

            <img id="smlFB" src="/../../images/trans.png" alt="logo">
            <img id="smlTW" src="/../../images/trans.png" alt="logo">
            <img id="smlIN" src="/../../images/trans.png" alt="logo">
            <img id="smlYT" src="/../../images/trans.png" alt="logo">

            <div id="fsm1">

            </div><div id="fsm2">

            </div><div id="fsm3">

            </div>


        </div><div id="footerSection2">

       <!-- <img src="/../../images/mysterychest1.jpg" alt="0" style="position: absolute; left: 25px; top:  13px;">
        <img src="/../../images/mysterychest(top2).png" alt="0" style="position: absolute; left: 25px; top:  4px;">-->
            <!-- <span style="position: absolute; top:  175px; left: 100px; font-size: 16px;">Hobbiests serving Hobbiests</span>-->
        </div><div id="footerSection3">


            <form>
                <span>Something to say?</span>
                <textarea rows="5" cols="30" name="userMessage">                </textarea>
                <span>Topic:</span>
                <select>
                    <option>Bug report</option>
                    <option>Suggestions</option>
                    <option>Other</option>
                </select>
                <span>Email Address:</span>
                <input type="text" name="UserEmail">
                <input type="submit" value="Submit">
            </form>
        </div>
    </div>
</div> 
        <link rel="stylesheet" href="/../FlexSlider/flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="/../FlexSlider/jquery.flexslider-min.js"></script>

<script>

  $(window).load(function () {
    $('.flexslider').flexslider({
    touch: true,
    slideshow: true,
    controlNav: true,
    directionNav : true,
    slideshowSpeed: 6000,
    animationSpeed: 600,
    initDelay: 0,
    pauseOnAction: true,

    start: function(slider) { // fires when the slider loads the first slide
      var slide_count = slider.count - 1;

      $('.slides').on('click', function () {
         $(this).siblings('.flex-direction-nav').children('li').children('a.flex-next').trigger('click');
      });

      $(slider)
        .find('img.lazy:eq(0)') 
        .each(function() {
          var src = $(this).attr('data-src');
          $(this).attr('src', src).removeProp('data-src');
        });
    },
    before: function (slider) { // fires asynchronously with each slider animation
      var slides = slider.slides,
        index = slider.animatingTo,
        $slide = $(slides[index]),
        $img = $slide.find('img[data-src]'),
        current = index,
        nxt_slide = current + 1,
        prev_slide = current - 1;

      $slide
        .parent()
        .find('img.lazy:eq(' + current + '), img.lazy:eq(' + prev_slide + '), img.lazy:eq(' + nxt_slide + ')')
        .each(function () {
          var src = $(this).attr('data-src');
          $(this).attr('src', src).removeProp('data-src');
        });
    },
     // default setting
    after: function(slider) {
        /* auto-restart player if paused after action */
        if (!slider.playing) {
          slider.play();
        }
    }
  });
});
</script>

        <script>
            function checkUrl(url) {
                switch (url) {

                    case "":
                        return 1;
                        break;
                    case "newstuff.php": //REMOVE THIS AFTER
                        return 1;
                        break;
                    case "products.php":
                        return 2;
                        break;
                    case "projects.php":
                        return 3;
                        break;
                    case "faq.php":
                        return 4;
                        break;
                    case "cart.php":
                        return 5;
                        break;
                }
            }

            $(document).ready(function () {

                var array = window.location.pathname.split('/');
                var lastsegment = array[array.length - 1];
                $("ul.navList1 > li:nth-child(" + checkUrl(lastsegment) + ") > a").css({ "background-color": "#1E60D9", "color": "#f9f9f9" });

                $("#logInBut").click(function () {
                    $("#LogInBox").fadeIn(1000);
                    $("#blackBackg").fadeIn(1000);
                });
                $("#blackBackg").click(function () {
                    $("#LogInBox").fadeOut(1000);
                    $("#blackBackg").fadeOut(1000);
                });
                $("#logEscape").click(function () {
                    $("#LogInBox").fadeOut(1000);
                    $("#blackBackg").fadeOut(1000);
                });

                $(".panelButton").mouseenter(function () {
                    $("span", this).css("color", "#f9f9f9");
                    $(this).css("background-color", "transparent");
                });

                $(".panelButton").mouseleave(function () {
                    $("span", this).css("color", "#222423");
                    $(this).css("background-color", "#f9f9f9");
                });

                $("ul.navList1 > li").mouseenter(function () {
                    $("a", this).css({ "background-color": "#1B4DA9", "color": "#f9f9f9" }); //#1B4DA9 , #001E56
                });

                $("ul.navList1 > li").mouseleave(function () {
                    $("a", this).css({ "background-color": "transparent", "color": "#1e1e1e" });

                    var array = window.location.pathname.split('/');
                    var lastsegment = array[array.length - 1];
                    $("ul.navList1 > li:nth-child(" + checkUrl(lastsegment) + ") > a").css({ "background-color": "#1E60D9", "color": "#f9f9f9" });
                });
            });

            function navButtonHighlight() {
                var url = window.location.pathname;
                if (url == "/Template.php") {
                    document.getElementById("LogOutForm")
                }
            }

            function SubmitLogOutForm() {
                document.getElementById("LogOutForm").submit();
            }
        </script>

</body>

Answer 1

嗯，这是因为溢出造成的，您需要像这样在css中使用overflow:hidden

.footerWrapper {
   overflow:hidden;
}

没事的

Answer 2

工作正常。

.footerInnerContainer{
     display:block;
    }

Answer 3

上面的答案对我不起作用，但是对我有用。 希望它可以帮助别人。

.footerWrapper {
  position: absolute;
  bottom: -5px;
}