删除网页上的水平滚动答案

【问题标题】：Remove Horizontal Scroll on Web Page删除网页上的水平滚动
【发布时间】：2016-02-17 03:25:50
【问题描述】：

我得到了一个需要删除的水平滚动条。似乎页脚超出了查看能力。我正在尝试找出删除水平滚动条的解决方案。我已经经历过 StackOverflow 上发布的类似案例，但他们只使用overflow提供了一个临时解决方案。我附上了JSFiddle

CSS

/*Main Header Container */
.header{
  color:#FFFFFF;    /*White Color*/
  height:60px;
  width:100%;
  margin:auto;
}
/*Inner Logo Container on the left*/
.header_logo{
  width:40%;
  height:100%;
  float:left;
}
#logo{
  height:100%;
  top:0;
  left:0;
  width:50%;
}
/*Inner Title Container on the right*/
.header_title{
  width:60%;
  float:left;
}
#titles{
  position:absolute;
  top:20px;
  font-family: "Times New Roman", Times, serif,Georgia;
  font-size:97%;
  color:#B8B8B8;
}
ul{
  list-style-type:none;
}
li{
  display:inline-block;
}

a{
  text-decoration: none;
  color:inherit;
  padding: 21px 10px;
}

ul a:hover{
  background-color:#666699;  /*Purple Color */

}

ul li ul{
  display:none; /*Hiding The Child Elements*/
}
li ul li{
    padding: 21px 10px;
    background-color:#666699 ;
    }


ul li:hover ul{   /*For all the ul elements whose parent is being hovered over*/
  display: block;
  position: absolute;

  width: 100%;
  top: 40px;
  left: 0;
  white-space: nowrap;
}

ul li ul li:hover{
    background-color:#C0C0C0;   
    }

  *{border:0;
    margin:0;
    padding:0;
    }
/*Main Content Section*/
.content{
    height:525px;
    margin:auto;
    background-color:#C0C0C0;
    }
    img{
        width:100%;
        height:515px;
        }

    .footer {
    margin:auto;
    background-color:#707070;
    height: 100px;
    width: 100%;
}

.footer_upperspace  {
    background-color:#C0C0C0;
    height:40%;
    width: 100%;
}

.footer a:hover {
    background: transparent;
    text-decoration: underline;
}

#footer_titles{
    position:relative;
    color:white;
    top:25%;
    left:3.5%;
    font-family: "Times New Roman", Times, serif,Georgia;
    font-size:80%;
}

.footer_lowerspace{
    background-color:#707070;
    position: relative;
    top:20%;
    left:8%;
    width:100%;
}

#icon{
    width:2%;
    height:2%;
}

HTML

<div class="header">
   <div class="header_logo">
      <img id ="logo" src="images/civic-logo.jpg">
   </div>
   <div class="header_title">
      <div id="titles">
         <ul>
            <li><a href="#">ABOUT CIVIC</a>
            <li>
            <li>
               <a href="#">PRODUCTS</a>  
               <ul>
                  <li><a href="#">CEMENT</a></li>
                  <li><a href="#">STEEL</a></li>
                  <li><a href="#">BRICKS</a></li>
                  <li><a href="#">SAND</a></li>
               </ul>
            </li>
            <li><a href="#">CONTACT US</a> </li>
         </ul>
      </div>
   </div>
</div>

<div class="content">
   <img src="images/clt3.jpg">
</div>
<div class="footer">
<div class="footer_upperspace">
   <div id="footer_titles">
      <ul>
         <li><a href="#">CIVIC HOME</a></li>
         <li><a href="#">INQUIRY</a></li>
      </ul>
   </div>
</div>

<div class="footer_lowerspace">
   <img id="icon" src="images/facebook.png" onClick="window.open('https://www.facebook.com/')";>
</div>

【问题讨论】：

你试过overflow-x:hidden吗？
jsfiddle.net/a1e03cxd/4
仍有改进的余地，但我认为我在下面的回答中解决了与您的问题有关的最大问题。

标签： html css horizontal-scrolling

【解决方案1】：

这是一个有效的小提琴：https://jsfiddle.net/fh909r9x/1/

首先，您在.footer 上缺少一个结束 div 标记。

你在.footer_lowerspace上有以下样式：

left:8%;
width:100%;

这会将页脚设置为基于其父宽度的左侧 8%，但也是父宽度的 100%。如果您确实希望此元素位于左侧 8% 处，则宽度需要为 92% 才能包含在父级中。

或者只使用填充：

// remove left: 8%
padding-left: 8%;
width: 92%

你有这个#footer_titles：

left:3.5%;

所以你需要将它的宽度显式设置为 96.5% 或者使用上面提到的填充方法。

而且，为了教育起见，使用嵌套的、相对定位的元素确实让人头疼。您应该浮动元素并使用边距或填充来偏移元素。或者只是使用灵活的盒子模型并一起摆脱相对和/或明确的浮动头痛。

【讨论】：

即使在这之后，由于某种原因还是有差距JSFIDDLE
更新了答案。只需使用填充。
我相信footer_titles 也应该设置为0。
@JBird 感谢您指出的问题。页脚现在与页面的其余部分完美对齐。但仍然出现水平滚动条。
@user3402248 你是否为任何容器元素添加了溢出属性？

【解决方案2】：

将#footer_titles 给left:0 和.footer_lowerspace 给left:0 将解决您的问题。

因为两者都有更大的价值，而且它会开箱即用。

Working Fiddle

【讨论】：

【解决方案3】：

在类 footer_lowerspace 的 ccs 文件中，您有以下内容：

.footer_lowerspace{
    background-color:#707070;
    position: relative;
    top:20%;
    left:8%;
    width:100%;
}

将此 div 的宽度设置为 100% 和左侧 8% 会导致它延伸到视口之外，您应该删除左侧 8% 或将宽度减小到 92%。这应该会移除水平滚动条。

【讨论】：

【解决方案4】：

有几件事要为您指出。尝试为你的身体添加 margin 0px 和 auto 和 padding 0px。此外，当您有一个不需要的滚动条时，您可以对您的问题进行特定修复，但您可以隐藏溢出。另外，你的 .footer_lowerspace 有 8% 的左边和 100% 的宽度，这将导致该元素超出视口。在下面的 CSS 中，我对其进行了调整并添加了正文样式。

CSS

body {
   margin: 0 auto;
   padding: 0px;
   overflow: hidden;
}
      /*Main Header Container */
 .header{
    color:#FFFFFF;    /*White Color*/
    height:60px;
    width:100%;
    margin:auto;
 }
/*Inner Logo Container on the left*/


 .header_logo{
     width:40%;
     height:100%;
     float:left;
 }
  #logo{
      height:100%;
      top:0;
      left:0;
       width:50%;
  }
 /*Inner Title Container on the right*/
 .header_title{
     width:60%;
     float:left;
  }
#titles{
   position:absolute;
   top:20px;
   font-family: "Times New Roman", Times, serif,Georgia;
   font-size:97%;
   color:#B8B8B8;
 }
 ul{
    list-style-type:none;
}
 li{
  display:inline-block;
}

a{
  text-decoration: none;
  color:inherit;
 padding: 21px 10px;
}

ul a:hover{
  background-color:#666699;  /*Purple Color */

}

ul li ul{
  display:none; /*Hiding The Child Elements*/
 }
li ul li{
    padding: 21px 10px;
    background-color:#666699 ;
    }


 ul li:hover ul{   /*For all the ul elements whose parent is being hovered  over*/        
   display: block;
   position: absolute;

   width: 100%;
   top: 40px;
   left: 0;
   white-space: nowrap;
 }

 ul li ul li:hover{
    background-color:#C0C0C0;   
    }

  *{border:0;
    margin:0;
    padding:0;
    }
 /*Main Content Section*/
 .content{
     height:525px;
     margin:auto;
     background-color:#C0C0C0;
    }
    img{
        width:100%;
        height:515px;
        }

     .footer {
    margin: auto;
    background-color:#707070;
    height: 100px;
    width: 100%;
}

.footer_upperspace  {
    background-color:#C0C0C0;
   height:40%;
   width: 100%;
}

.footer a:hover {
    background: transparent;
    text-decoration: underline;
}

 #footer_titles{
    position:relative;
    color:white;
    left:3.5%;
    font-family: "Times New Roman", Times, serif,Georgia;
    font-size:80%;
  }

 .footer_lowerspace{
    background-color:#707070;
    position: relative;
    top:20%;

    width:100%;
    background-color: blue;
 }

#icon{
   width: 100%;
   height:2%;
   }

【讨论】：

【解决方案5】：

您的 CSS 中通常有很多不建议使用的内容。基本上，这是我更一般的建议：

避免使用相对位置或绝对位置并为顶部和左侧提供值
使用边距和内边距比使用顶部和左侧要好得多。
默认情况下，许多元素（显示值为块的元素）会填满屏幕上的可用宽度，将它们显式设置为 100% 的宽度可能会产生一些最好避免的其他影响。
了解block、inline和inline-block的显示值的区别

【讨论】：