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