如何防止水平滚动?

时间:2014-10-14 15:18:28

标签: html css

目前我的代码看起来像这样



body {
    padding: 0px;
    margin: 0px;
    background-color: #ABA49F;
    font-family: Verdana, Geneva, sans-serif
}
.header_bar {
    width: 100%;
    height: 45px;
    z-index: 1000 !important;
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.506);
    height: 22px;
    padding: 7px 40px;
    background-image: linear-gradient(to top, #212121 9%, #181818 100%);
    border-bottom: 2px solid #606060;
}
.header_content {
    width: 50%;
    margin: left;
}
.header_content li {
    list-style: none;
    float: left;
    font-size: 15px;
}
.title li a {
    color: #ffc900 !important;
}
.header_content li a {
    text-decoration: none;
    color: white;
    margin-right: 30px;
}
.header_content a:hover {
    color: #ffc900;
}
.sidebar_frame {
    z-index: 111;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    width:50px;
    background:#000;
}

<div class="sidebar_frame">aaaa</div>
<div class="header_bar">
    <div class="header_content">
        <div class="title">
            <li><a href=""><b>Farm</b></a>
            </li>
        </div>
        <li><a href="">New farm</a>
        </li>
        <li><a href="">aaaa</a>
        </li>
        <li><a href="">aaaa</a>
        </li>
    </div>
</div>
&#13;
&#13;
&#13;

我试图制作一个100%高度的侧边栏。我不知道为什么没有z-index的侧边栏位于菜单的顶部,为什么页面水平轴上有一些随机可滚动空间?

移除侧边栏会清除可滚动空间。

2 个答案:

答案 0 :(得分:2)

侧边栏与菜单重叠,因为position: absolute元素are removed from the normal flow of the document。这意味着标题自定位而不考虑侧边栏。

修复重叠:

left-margin提供给侧边栏宽度相同的.header_bar。这可以容纳侧杆的空间。

修复滚动问题:

  • .header_bar移除左右填充,并将其作为左边距填充到.title

  • 删除.header_bar

  • 的100%宽度

一些小改进:

  • 删除<li>并将样式直接应用于元素

  • 删除或增加.header_content

  • 的宽度
  • 删除不存在的margin: left

  • .title a放在CSS中的另一个链接属性之后。当属性值冲突时,声明的最后一个属性是胜利者。 This eliminates the need for !important.

  • 删除所有z-index属性;他们不再需要了。

把所有这些放在一起,你得到这个例子:

&#13;
&#13;
body {
  padding: 0px;
  margin: 0px;
  background-color: #ABA49F;
  font-family: Verdana, Geneva, sans-serif
}
.header_bar {
  height: 45px;
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.506);
  height: 22px;
  padding: 7px 0;
  background-image: linear-gradient(to top, #212121 9%, #181818 100%);
  border-bottom: 2px solid #606060;
  margin-left: 50px;
}

.header_content .title {
  list-style: none;
  float: left;
  font-size: 15px;
  padding-left: 40px;
}
.header_content a {
  text-decoration: none;
  color: white;
  margin-right: 30px;
  float: left;
}
.title a {
  color: #ffc900;
}
.header_content a:hover {
  color: #ffc900;
}
.sidebar_frame {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50px;
  background: #000;
}
&#13;
  <div class="sidebar_frame">aaaa</div>
  <div class="header_bar">
    <div class="header_content">
      <div class="title">
        <a href=""><b>Farm</b></a>            
      </div>
      <a href="">New farm</a>          
      <a href="">aaaa</a>          
      <a href="">aaaa</a>          
    </div>
  </div>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

以下是您问题的解决方案:jsFiddle。您需要删除分配给.header_bar的水平填充,并将z-index的{​​{1}}更改为.sidebar_frame