gpt4 book ai didi

html - 不需要的白色部分出现在网站顶部

转载 作者:行者123 更新时间:2023-11-28 17:29:56 24 4
gpt4 key购买 nike

如标题所述,我的网站在更改页面时有一部分空白。索引页面没有问题,但是当转到“工作”或“联系”页面时,会出现一个空白区域。

要演示,请转到 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。

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 导致了一半的白屏,现在我知道如何找到其余部分了。对于我最初的帖子不完整,我深表歉意,我只是没有诊断可以展示。

最佳答案

终于明白了

不能放过这个。

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

Lcontainer 没有显示设置,我通过谷歌浏览器属性将其更改为显示:inline-block;

没有更多的空白 :)

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

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

Google Chrome 能够在看到结果的同时识别和使用元素,这确实使它成为一个出色的工具。

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

关于html - 不需要的白色部分出现在网站顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37005827/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com