logo标签列表

移动视图中右侧出现不必要的空白间隙。

htmlcssbootstrap-4responsive-design
29

在我的作品集网站上，移动视图（仅在Chrome中）的右侧出现了一片白色空白区域，在桌面和Mozilla移动视图中则没有这个问题。我在此附上截图。

Chrome问题

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 的起始部分以供参考。 有谁能帮我猜测是什么原因导致了这个问题。我已经尝试过鬼影 CSS 方法来检查是否有任何元素超出了视口宽度，但没有找到。提前致谢。

打开文档结构并检查占据该空间的内容。 - zerkms
没有代码，我们就无法做到。 - juzraai
1
你的某个元素会是问题的原因，但如果不看代码，很难确定。检查元素并浏览每个 div，看看能否找到它。如果找不到，就在检查元素中删除每个顶级元素，直到水平滚动条消失。然后逐步找出导致问题的元素。 - fredrivett
1
@fredrivett，当我检查我的空白时，它没有在任何元素上进行检查。 - MMR
@MMR 检查文档，然后逐个删除父级 div，这样你就能找到引起问题的原因了。 - Aref Ben Lazrek
显示剩余2条评论
7个回答
95
首先，按照以上回答的建议，确保任何元素的宽度都不超过100%，然后尝试以下操作：
在HTML中添加 overflow-x: hidden;。
html,body{
    overflow-x: hidden;
}

对我有用

3
在未添加 "html" 的情况下，检查在计算机上的手机大小似乎可以正常工作，但在手机上仍然出现问题。通过添加额外的 "html"，它也可以在设备上修复该问题。 - edindubai
1
对我有用。建议添加HTML代码。 - Jyotirmoy
不建议这样做，但正如@mweb建议的那样，找到破坏你视线的元素。这样做可能有一个潜在的缺点：你可能会破坏其他东西，比如滚动视差效果。 - ShifraSec
48

我认为你的页面上可能有一个元素具有超过100％的宽度、填充或边距。

当“检查”页面并将鼠标悬停在白色空间上时，您可能会选择一个元素，该元素超出了所需页面范围。

请尝试使用检查元素找到此元素，并使用媒体查询在CSS中进行更改。

2
有一个元素的宽度大于100%，导致了这个问题。感谢大家。 - MMR
你能举一个宽度超过100％的示例场景吗？ - Ramesh Pareek
谢谢，我遇到了类似的问题，发现是宽度设置为100%并带有额外填充的元素造成了问题。通过在容器中添加box-sizing: border-box;来解决问题。 - Ireneusz
18

对于简单而不复杂的代码，只需在CSS文件中使用此代码。

body{
    overflow-x: hidden;
}
6
最好也将其用于HTML中，就像Vinay Yadav建议的那样：html,body{ overflow-x: hidden; }。 - usama sulaiman
3
这个空白的问题一直困扰着我，我正在搜索想法时发现了这个帖子。我是通过以下方法解决的（背景故事- 一切都很好，然后我做了一些CSS更改，几天后我注意到有了这个空白）。在所有页面上，白色空白不在页眉右侧，只在某些页面上出现，这就是我知道它是一个div问题的原因。我制作了一个小列表，列出了那些不在好页面上但存在于白色空白页面上的元素，这让我能够缩小范围。
我简单地使用Chrome检查器和主要受影响页面元素选项卡上的向下箭头。在滚动并突出显示的内容中，我遇到了一个WordPress类似按钮的div，我为其设置了Margin而非padding。这足以将div的边缘移向整个页面的右侧白色空间，包括页眉。
我认为白色空间之所以不会在检查器中显示，是因为它实际上不存在，除了在专门受影响的div中，而在我的情况下，这是一个仅在页面底部高度为20-30px的框。
我尝试了overflow-x/hidden命令，虽然它对我有效，但我发现它会导致移动设备滚动时出现抖动，有时甚至无法开始滚动，只是移动一下就弹回起点。所以那样不好！ 我想对于任何遇到这个问题的人来说，使用检查器找到div，而不是隐藏overflow，是最简单的方法。
希望这能给某人提供一个指针！干杯:) D
3

针对移动端视图，在 @media (your max/min width) 中，为html和body标签添加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;
  }
}

这个方法对我有效。

1

固定顶部栏

如果您想要一个固定的顶部栏，则使用hidden值会破坏它。因此，请改用clip。

html,body{
    overflow-x: clip;
}

使用clip的示例

html,body { 
  overflow-x: clip;
}

body {margin:0;}

.topBar {
  top: 0;
  position: sticky;
  background: yellow;
  z-index: 10;
}

.content {
  width: 100%;
  height: 200vh;
  font-size: 100px;
  background: linear-gradient(to bottom, white, red);  
}

.rightBox {
  width: 200px;
  height: 200px;
  position: absolute;
  right: -100px;
  top: 100px;
  background: red;
  font-size: 20px;
}
<div class="topBar">
  <div> Top bar</div>
</div>

<div>


<div class="content">
  <div>My content</div>
  <div class="rightBox">it goes out</div>
</div>
</div>

如果在上面的代码片段中使用hidden，则会破坏我们的sticky顶部栏： 

html,body { 
  overflow-x: hidden;
}

body {margin:0;}

.topBar {
  top: 0;
  position: sticky;
  background: yellow;
  z-index: 10;
}

.content {
  width: 100%;
  height: 200vh;
  font-size: 100px;
  background: linear-gradient(to bottom, white, red);  
}

.rightBox {
  width: 200px;
  height: 200px;
  position: absolute;
  right: -100px;
  top: 100px;
  background: red;
  font-size: 20px;
}
<div class="topBar">
  <div> Top bar</div>
</div>

<div>


<div class="content">
  <div>My content</div>  
  <div class="rightBox">it goes out</div>
</div>
</div>

1
在我的情况下，我尝试了其他人在这里给出的所有步骤，但都没有起作用。有趣的是，即使检查元素也没有显示问题所在。花了我一段时间，然后我开始删除和添加页面的一些主要元素。结果发现是一个 div 中有一个不良元素。
重点是，你可能需要反复迭代才能找到解决方案。尝试删除一些主要可疑元素，保存，重新加载并查看是否解决了问题，逐渐你会找到罪魁祸首。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接