网站在纵向视图中未覆盖全屏答案

【问题标题】：Website not covering full screen in portrait view网站在纵向视图中未覆盖全屏
【发布时间】：2015-09-03 11:14:05
【问题描述】：

我设计了响应式网站，即在笔记本电脑和标签和移动设备的横向视图中完美运行。

当我在 portrait 视图中检查 body 标签没有覆盖全屏时，屏幕右侧出现一条白色垂直带。

风景：

没有错误...完美运行...

纵向视图：

正文没有覆盖整页....

正文标签CSS：

 body{
   font-family: 'Raleway','Arial Narrow', serif;
    width: 100%;
    font-weight: 400;
    font-size: 15px;
    color: #333;
    -webkit-font-smoothing: antialiased;
    overflow-y: scroll;
    overflow-x: hidden;
    margin:0 !important ;
 padding:0 !important
    }

【问题讨论】：

检查过并且对我来说工作正常吗？右边没有空格？
@RachelGallen body 没有原生填充。
@Aaron 您在哪个设备上设备...在移动纵向视图中它不适合我...
@Rachel 感谢您的建议，但没有奏效...
@vivek 你能指导我改变那个 css.... 没有 box-sizing value 解决这个问题..

标签： css responsive-design mobile-website

【解决方案1】：

您已将box-sizing: content-box; 用于fs-container 类，即导致问题的原因，它是您的<body> 覆盖了您的整个网站，但由于该类的属性是白色-空格.

我用过这个CSS：

       @media screen and (max-width: 570px) {

          .fs-container {
              position: relative;
              width: 100%;
              padding: 0 20%;
              max-width: 100%;
              left: 35px;
              -webkit-box-sizing: border-box;
              -moz-box-sizing: border-box;
               box-sizing: border-box;
           }

            .fs-block {
               width: 100%;
            }

      }

     @media screen and (max-width: 380px) {

           .fs-container {
              padding: 0 15%;
           }

     }

在特定的媒体查询上，请试试这个，它会为你解决问题。

【讨论】：

Soooper Dooper 喜欢您的回答....感谢您的关注....现在它工作正常.....
@MonickaAkilan 很高兴为您提供帮助 :)

【解决方案2】：

我在我的开发人员工具中检查了这一点，一切正常。

也许问题在于您发布的代码：

 overflow-x: hidden;
 margin:0 !important ;
 padding:0 !important

请检查您的分号：

 overflow-x: hidden;
 margin:0 !important;
 padding:0 !important;

【讨论】：

【解决方案3】：

确保您为margin 和padding 使用通用选择器。

* {
    margin: 0;
    padding: 0;
  }

有时会产生一些问题。

【讨论】：

那么你必须在浏览器的检查元素模式下检查你网站的肖像视图，这可能会帮助你找出这个空白。
是的，我只检查了那个......简单的身体标签覆盖了那个非空白......没有填充或边距......这就是为什么我无法弄清楚这个问题...... .
在我看来，错误出在“fs-container”类的正文部分标签的最小或最大宽度中。通过更改此设置，我希望您的问题能够得到解决。