个人中心
gpt4 book ai didi

html - 删除页脚下的小空白

转载 作者：太空宇宙 更新时间：2023-11-03 21:17:33 25 4
gpt4 key购买 nike

我一直在四处寻找解决方案，以解决出现在我的页脚下方的一小段空白，但似乎没有任何效果。我试过操纵 margin-bottom 和 padding-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>

最佳答案

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

.footerWrapper {
   overflow:hidden;
}

一切都会好的

关于html - 删除页脚下的小空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40814129/

25 4 0
文章推荐： python - 手动提交偏移量到kafka主题的正确方法是什么
文章推荐： c# - 如何在 Windows 10 应用程序中动态更改 Split View背景颜色
文章推荐： python - 如何使用Python从LaTeX表中提取数据
文章推荐： c# - 实例化 PRISM shell 的多个实例
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com