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

Question

我设计了响应式网站即在笔记本电脑和横向选项卡和移动视图中完美运行。

当我检查纵向视图正文标签未覆盖全屏时，屏幕右侧出现白色垂直带。

横向视图：

没有错误...工作完美...

纵向视图：

正文未覆盖整页....

正文标签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
    }

Answer 1

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

* {
    margin: 0;
    padding: 0;
  }

有时会产生一些问题。

Answer 2

我在我的开发者工具中检查过，一切正常。

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

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

请检查你的分号：

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

Answer 3

您已将 box-sizing: content-box; 用于导致问题的 class fs-container 即，它是您的 <body> 覆盖的 您的完整网站，但由于 class 上的属性有 white-space.

我用过这个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%;
           }

     }

关于特定的 media-query，请试试这个，它会为您解决问题。

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

Website not covering full screen in portrait view

css

responsive-design

mobile-website