Question

正如标题所说，在更改页面时，我的网站上有一部分空白区域。索引页面没有问题，但是当进入“工作”或“联系”页面时，会出现一个空白空格。

为了演示，请转到my website。然后调整浏览器的大小，直到响应断点（或只是使用手机），然后使用菜单，切换到“工作”页面或“联系”页面。我现在已经解决了这个问题，但问题仍然存在，因为我无法调试，使用控制台或以任何方式诊断出问题。如果您这样做，请说明您的诊断方法。

提前谢谢。

编辑＃1：在评论指出它可能是JS问题后，我查看了我的JS代码，我唯一能想到的是以下代码行导致问题：

$(document).ready(function() {
function setHeightLContainer() {
windowHeight = $(window).innerHeight();
$('#lContainer').css('min-height', windowHeight);
};
setHeightLContainer();

$(window).resize(function() {
setHeightLContainer();
});
});

但是，在删除以下代码（以及任何相似内容）后，问题仍然存在。

编辑＃2：以下是HTML和JS for Work页面。

JS：

$(".navSide").on("click",".workButton",(function(){
if (!$(".workButton").hasClass("active")) {
$(this).addClass("active").siblings().removeClass("active");
$("#desTitle").load("work.html #desTitle", function(response,status,xhr) {
  if ( status == "error" ) {
  $("#warning").fadeIn("fast");
}});
$("#rContent").animate({width:'toggle'},400, function() {$("#rContent").load("work.html #rContent > *", function(response,status,xhr) {
  if ( status == "error" ) {
  $("#warning").fadeIn("fast");
}})});
$("#rContent").animate({width:'toggle'},4500);
$("#lContent").fadeOut(400,function(){
  $("#lContent").load("work.html #lContent > *", function(response,status,xhr) {
  if ( status == "error" ) {
  $("#warning").fadeIn("fast");
}});
});
$("#lContent").fadeIn(4500, function(){});
}
}));

HTML：

<body>
    <div id="lContainer">
        <div id="lContent">
            <h1 class="infoHead infoPos" id="lContentWorkHeader">Work</h1>
            <p class="lead shortDes infoPos">Please feel free to take a look at the work I have done so far</p>
            <p class="shortDes infoPos" id="lContentWork">The content on the white portion will always be updated when I've had the opportunity to do more projects. I'm always welcoming new projects as I have no doubt in my abilities.</p>
        </div>
    </div>

（修复）编辑＃3： Andy的评论指出问题可能来自CSS样式。 margin-top:30%的ID导致白屏的一半，我现在已经找到了如何找到其余的ID。我为我的初始帖子不完整而道歉，我只是没有诊断信息。

Answer 1

终于明白了。

不能放过这个。

当低于767px时顶部的白色条实际上是lContent的一部分，其大小是内容的100％，Lcontainer似乎显示在顶部。

Lcontainer没有显示设置，我通过Google Chrome属性更改显示：inline-block;

不再有空格：）

将您的代码更改为以下内容以进行测试：

<div id="lContainer" style="min-height: 993px;/* position: fixed; */display: inline-block;">

谷歌Chrome可以在看到结果的同时识别和玩元素，确实使它成为一个出色的工具。

您可以尝试其他选项，但这似乎对我来说没问题。

网站顶部显示不需要的白色部分

1 个答案: