2016-11-26 77 views
0

我一直在寻找解决方案,以找到出现在我的页脚下面的空白区域,但似乎没有任何效果。我试图操纵margin-bottompadding-bottom无济于事。删除页脚下的小空白处

与页脚该网站位于:website

有问题的页脚中的“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> 
+2

请在此处添加有意义的代码和问题描述。请不要链接到需要修复的网站 - 否则,一旦 问题得到解决,或者您链接到的网站无法访问,此问题将对未来的访问者失去任何价值。发布 [最小,完整和可验证示例(MCVE)](http://stackoverflow.com/help/mcve) 显示您的问题将帮助您获得更好的答案。欲了解更多信息,请参阅 [我网站上的某些内容不起作用。我可以只粘贴一个链接吗?](http://meta.stackexchange.com/questions/125997/) 谢谢! – j08691

+0

在我的身体标记中添加了我所有的代码 – DiscreteTomatoes

+0

有没有_you_尝试过使用浏览器的开发工具?逐个去除样式规则以查看问题是什么? – chazsolo

回答

3

嗯,这是因为溢出,你需要在你的CSS使用overflow:hidden这样

.footerWrapper { 
    overflow:hidden; 
} 

这将是所有罚款

+0

谢谢!这正是我一直在寻找的:) – DiscreteTomatoes

0

工作的罚款。

.footerInnerContainer{ 
    display:block; 
    }