删除网页上的水平滚动

Question

我收到一个水平滚动条，需要将其删除。页脚似乎超出了查看能力。我想找出一个解决方案来删除水平滚动条。我经历过 Whosebug 上发布的类似案例，但他们仅通过使用 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>

Answer 1

这是一个有效的 fiddle：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% 或使用上述填充方法。

并且，为了教育目的，您使用嵌套的、相对定位的元素确实是在自讨苦吃。您应该浮动元素并使用边距或填充来偏移元素。或者只使用灵活的盒子模型，一起摆脱相关的 and/or 清除浮动问题。

Answer 2

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

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

Working Fiddle

Answer 3

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

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

给这个 div 宽度 100% 和左边 8% 会导致它延伸到视口之外，您应该删除左边 8% 或将宽度减小到 92%。这应该删除水平滚动条。

Answer 4

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

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

Answer 5

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

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

删除网页上的水平滚动

Remove Horizontal Scroll on Web Page

html

css

horizontal-scrolling