删除网页上的水平滚动

时间：2016-02-17 03:25:50

标签： html css horizontal-scrolling

我得到一个水平滚动条，我需要删除它。看起来页脚超出了观看容量。我试图找出一个解决方案来删除水平滚动条。我已经浏览了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>

5 个答案:

答案 0 :(得分：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％或者使用上面提到的填充方法。

而且，为了教育，你真的要求使用嵌套的，相对定位的元素来解决问题。您应该浮动元素并使用边距或填充来偏移元素。或者只是使用灵活的盒子模型，一起消除相对和/或清晰的浮动头痛。

答案 1 :(得分：1)

将#footer_titles提交至left:0，将.footer_lowerspace提交至left:0将解决您的问题。

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

<强> Working Fiddle

答案 2 :(得分：1)

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

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

给这个div宽度为100％并且留下8％会使它延伸到视口以外你应该向左移除8％或将宽度减小到92％。这应该删除水平滚动条。

答案 3 :(得分：1)

你的CSS中通常有很多东西是无法建议的。基本上，这是我更一般的建议：

  • 避免使用相对或绝对位置并为顶部和左侧提供值
  • 使用边距和填充比使用上边距和左边更好。
  • 默认情况下，许多元素（显示值为块的元素）会填满屏幕上的可用宽度，并将它们设置为宽度为100％可以产生一些其他效果，这是最好的避免。
  • 了解block，inline和inline-block
    • 的显示值之间的差异

答案 4 :(得分：1)

有几件事需要指出。尝试输入边距0px并自动填充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%;
   }
相关问题
最新问题