Html 删除网页上的水平滚动

我得到一个水平滚动条，我需要删除。页脚似乎超出了查看容量。我试图找出一个解决方案，删除水平滚动条。我也经历过StackOverflow上发布的类似案例，但它们只是通过使用

overflow

提供了一个临时解决方案

CSS

HTML

这里有一把小提琴：

首先，您在

.footer

上缺少一个结束div标记

在

.footer\u lowerspace

上有以下样式：

left:8%;
width:100%;

这将根据页脚的父宽度将页脚向左设置8%，但同时也是父宽度的100%。如果您确实希望该元素向左8%，则宽度需要为92%，才能包含在父元素中

或者只使用填充：

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

在

#页脚(标题

)上有这样的内容：

left:3.5%;

因此，您需要显式地将其宽度设置为96.5%，或者使用上面提到的填充方法

而且，为了教育起见，使用嵌套的、相对定位的元素确实让人头疼。您应该浮动元素，并使用边距或填充来偏移元素。或者只需使用灵活的方框模型，就可以摆脱相对和/或清除浮动的麻烦。

将

#footer\u标题

添加到

左：0和
。footer\u lowerspace
添加到
左：0将解决您的问题

因为两者都有更大的价值，而且都会不合时宜

在您的ccs文件中，对于类页脚较低的空间，您有以下内容：

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

如果将此div的宽度设为100%，左8%，则会使其延伸到视口之外。您应该删除左8%或将宽度减小到92%。这将删除水平滚动条。
在CSS中通常有很多东西是不建议的。基本上，以下是我更一般的建议：


避免使用相对或绝对位置，并为顶部和左侧提供值
使用边距和填充比使用左上角要好得多
默认情况下，许多元素（显示值为block的元素）填充屏幕上的可用宽度，并将它们显式设置为100%宽度可能会产生一些其他效果，最好避免
了解块、内联块和内联块的显示值之间的差异
有几件事要给你指出。试着为你的身体加入边距0px和自动填充0px。除此之外，当你每次都有一个不需要的滚动条时，你可以对你的问题进行特定的修复，但可以隐藏溢出。另外，您的.footer_较低的空间左8%，宽度为100%，这将导致该元素离开视图端口。在下面的CSS中，我对其进行了调整并添加了身体样式

CSS

您是否专门尝试了
overflow-x:hidden
？仍有改进的余地，但我认为我在下面的回答中解决了与您的问题相关的最大问题。即使在这之后，由于某种原因，更新的答案仍然存在差距。只需使用填充。我相信
footer\u titles
也将设置为0。@JBird我很欣赏您指出的问题。页脚现在与页面的其余部分完全对齐。但仍然会出现水平滚动条。@user3402248是否已将溢出属性添加到任何容器元素中？
left:3.5%;

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

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%;
   }