移动视图中右侧不需要的空白区域
[英]Unwanted white space on right side in mobile view
问题描述
对于我的投资组合网站，我在移动视图中看到右侧的空白区域（仅在 chrome 中），在桌面和 Mozilla 移动视图中它很好。 这里我附上它的截图。
html { scroll-behavior: smooth; margin: 0px !important; padding: 0px !important; width: 100%; height: 100%; } body { width: 100%; height: 100%; margin: 0px !important; padding: 0px !important; font-family: 'Montserrat', sans-serif; position: relative; } #preloader { height: 100%; width: 100%; position: fixed; top: 0; left: 0; background: rgba(51, 51, 51, 1); z-index: 999; } .spinner { width: 80px; height: 80px; border: 2px solid #f3f3f3; border-top: 3px solid #f25a41; border-radius: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; animation: spin 1s infinite linear; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .navbar-default { transition: 500ms ease; background-color: transparent; } .navbar-default.scrolledDown { background: #333333; } #navbarContainer { margin: 0px !important; padding: 0px !important; width: 100%; left: 0; z-index: 100; } .active { color: #f73c56 !important; border-bottom: 3px solid #f73c56 !important; } video { width: 100%; object-fit: contain; right: 0; bottom: 0; min-width: 100%; min-height: 100%; display: inline-block; vertical-align: baseline; } /* @media (min-aspect-ratio: 16/9) { .video { width: 100%; height: auto; } } @media (max-aspect-ratio: 16/9) { .video { width: auto; height: 100%; } } */ h1 { font-family: 'Fjalla One', sans-serif; font-weight: bold; } .banner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50%; height: 50%; text-align: center; color: #333; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi2r9//38gYGAEESAAEGAAasgJOgzOKCoAAAAASUVORK5CYII=); text-shadow: 2px 2px 4px #666; } .actualText { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100% !important; z-index: 5; margin: 0px !important; padding: 0px !important; } .typedText { color: #e60000; } @media screen and (max-width: 552px) { .banner { position: absolute; top: 20%; width: 100%; height: 20%; background-image: none; background-color: rgba(235, 235, 235, 0.4); padding: 0%; } } @media screen and (max-width: 375px) { .banner { position: absolute; top: 15%; font-size: 10px !important; width: 100%; height: 20%; background-image: none; background-color: rgba(235, 235, 235, 0.4); padding: 0%; } } hr { height: 1px; display: block; width: 50%; background-image: -webkit-linear-gradient(left, #fff, #ccc, #fff); }
<body data-spy="scroll" data-target=".navbar" data-offset="55"> <div id="preloader"> <div class="spinner"></div> </div> <!-- ----------NAVBAR---------- --> <nav class="navbar navbar-expand-md fixed-top navbar-default navbar-dark" id="navbarContainer" > <a class="navbar-brand" href="#top">Tathagat</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-label="Toggle Navigation" aria-controls="navbar supported content" aria-expanded="false" > <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-end" id="navbarContent" > <ul class="navbar-nav navbar-right"> <li class="nav-item"> <a class="nav-link active" href="#homeSection">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#aboutSection">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#workSection">Work</a> </li> <li class="nav-item"> <a class="nav-link" href="#skillsSection">Skills</a> </li> <li class="nav-item"> <a class="nav-link" href="#timeLineSection">Timeline</a> </li> <li class="nav-item"> <a class="nav-link" href="#resumeSection">Resume</a> </li> <li class="nav-item"> <a class="nav-link" href="#contactMe">Contact</a> </li> <li> <button class="btn btn-dark" id="myBtn" onclick="myFunction()"> Pause </button> </li> </ul> </div> </nav> <!-- ----------Content---------- --> <div class="homeSection" id="homeSection"> <div class="video-container"> <video autoplay loop id="bgVideo" poster="./media/bgVideoPoster.png"> <source src="./media/bgVideo.mp4" type="video/mp4" /> </video> <div class="banner"> <div class="actualText"> <h1>Hi There !</h1> <h1>I am <span class="typedText"></span></h1> </div> </div> </div> </div> <div class="aboutSection mb-4" id="aboutSection"> <div class="container p-3"> <div class="row text-center"> <div class="col mb-3 spacerClass"> <h1 data-aos="fade-down" data-aos-delay="50" data-aos-duration="2000" > About Me </h1> <hr /> </div> </div> <div class="row"> <div class="col-sm-6 p-2 text-center" data-aos="fade-right" data-aos-delay="50" data-aos-duration="2000" > <img src="./media/img/myPhoto.jpg" height="300" width="300" alt="Tathagat Mohanty" style=" -webkit-box-shadow: 7px 7px 5px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 7px 7px 5px 0px rgba(0, 0, 0, 0.75); box-shadow: 7px 7px 5px 0px rgba(0, 0, 0, 0.75); " /> </div> <div class="col-sm-6 text-center" data-aos="fade-left" data-aos-delay="50" data-aos-duration="2000" > <h4 class="mt-3"> Hello this is Tathagat Mohanty. I am a Web Developer by profession with 2+ years of experience in this fast paced IT Industry. </h4> <h5 class="text-muted mt-3"> I am an astute learner skilled in FrontEnd Technologies. I believe Design is something which is very personal and individual. With that in mind I try to develop websites for multiple types of end users with an approachable and clean design. </h5> </div> </div> </div> </div>
我已经在代码片段中发布了 HTML Body 和 CSS 的起始部分以供参考。 谁能帮我猜猜是什么原因造成的。 我已经尝试了 ghost css 方法来检查是否有任何元素超出了视口宽度但找不到任何元素。 提前致谢。
7 个解决方案
解决方案1
75 2019-10-04 12:49:51
首先按照上面的答案确保任何元素的宽度不应超过 100%，然后也试试这个：
尝试制作overflow-x: hidden; 在 html 中也是如此
html,body{
overflow-x: hidden;
}
它对我有用
解决方案2
43 已采纳 2017-09-02 10:42:21
我认为您的页面上可能有一个元素的宽度和填充或边距超过 100%。 当“检查”页面并将鼠标悬停在空白处时，您可能会在那里选择一个超出所需页面的元素。
尝试使用检查元素找到它，并使用媒体查询在 CSS 中更改它
解决方案3
14 2019-03-11 03:57:19
对于简单而不复杂的代码，只需在 css 文件中使用此代码
body{
overflow-x: hidden;
}
解决方案4
3 2022-01-15 14:49:51
对于 html 和 body 标签的@media (your max/min width) ，请添加overflow-x: hidden 。
尝试这个：
html, body {
// Smooth scroll always for html tag
scroll-behavior: smooth;
// scroll-snap-type: y; // <-- snap in y axis
}
// mobile
@media (max-width: 800px) {
html, body {
overflow-x: hidden;
}
}
这对我有用。
解决方案5
1 2022-04-11 05:50:17
html,body {
width: 100%;
overflow-x: hidden;
}
解决方案6
0 2022-07-13 03:40:51
就我而言，我尝试了其他人在这里给出的所有步骤，但没有成功。 有趣的是，即使检查元素也没有显示出究竟是什么问题。 花了我一段时间，然后我开始删除并添加回我页面的一些主要元素。 原来它是一个 div，里面有一个流氓元素。
关键是，在找到解决方案之前，您可能必须一遍又一遍地迭代。 尝试删除一些主要的可疑元素，保存，重新加载，看看是否解决它，逐渐你会找到罪魁祸首
解决方案7
0 2022-07-22 11:27:57
这个空白问题一直困扰着我，当我遇到这个线程时，我正在做通常的想法搜索。 我修复我的方式..（背景故事 - 一切都很好，然后我做了一些 css 更改，几天后我注意到了空白。）空白不在所有页面的标题右侧，只有某些页面- 这就是我知道这是一个 div 问题的方式。 列出了一些不在好页面上但出现在空白页面上的元素，让我缩小范围）
我只是使用了 Chrome 检查器和受影响的主要页面元素选项卡上的向下箭头。 在滚动突出显示的内容时，我遇到了一个类似 Wordpress 的按钮的 div，我为它设置了一个边距而不是填充。 这足以将 div 的边缘移动到整个页面右侧的空白区域，包括标题。
我认为当你检查时空白没有出现的原因是因为它实际上并不“存在”，因为除了在完全受影响的 div 中之外，它没有更好的词，在我的情况下它只是一个盒子页面底部的高度为 20-30 像素。
我尝试了overflow-x/hidden 命令，虽然它确实对我有用，但我发现它产生了一个问题，即移动设备滚动抖动，有时根本不会开始滚动，只是移动和反弹开始观点。 所以这不是好的obv！ 我会对任何有这个问题的人说，检查员并找到 div，而不是隐藏溢出是最无故障的方法。
希望能给别人指点！ 干杯:)
D
移动视图中不需要的空白
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.