Question

我有一个horizontalm线从身体内容中分隔我的标题，并希望它在滚动时保持原位。当我尝试将其设置为“固定”位置时，它会做一些有趣的事情，有人可以帮助，谢谢。

这是HTML

     <div id="wrapperfull">

     <div class="fitter">

     <div id="head">

     <div id="header">
     <a href="index.html"><img src="../Images/Header2.png" width="379" height="99" alt="Just Joel Header"></a>
     </div><!-- end header div -->

     <div class="navigation">

     <div class="menu-holder">

     <ul class="menu">

        <li><a href="index.html">HOME</a></li>

        <li><a href='print.html'>WORK</a>
      </li>

        <li><a href="photography.html">PHOTOGRAPHY</a>
      </li>

        <li><a href="blog.html">BLOG</a>
      </li>

        <li><a href="inspired.html">INSPIRED</a>
      </li>

       </ul>
     </div>
     <!-- menu-holder end -->
     </div><!-- end navigation div -->     


     </div>


     </div>

     <div class="bottom-color">
     </div>

     <div class="heading">

     <h1>SHOWCASE</h1>

     </div>

这是CSS

    #wrapperfull {
min-height: 100%;
width: 1050px;
border: thin;
border-color: #00BDE5;
margin-top: 0px;
background-color: #FFF;
position: relative; /* for the absolute positioned footer */
margin: auto;
margin-bottom: auto;
padding-top: 0.1px;
padding-right: 40px;
padding-bottom: 0px;
padding-left: 30px;
    }

    .fitter {
height: 115px;
width: 1050px;
background-color: #FFF;
    }

    .bottom-color {
height: 15px;
color: #00BDE5;
border-style:solid;
border-bottom-width: 1px;
border-right-width: 0px;
border-left-width: 0px;
margin-bottom: 20px;
    }

    #head {
    height: 100px;
    width: 1070px;
    border: none;
    margin: auto;
    background-color: #FFF;
    position: fixed;
    z-index: 1;
    }

    #header {
height: 125px;
width: 1050px;
font-family: Helvetica, sans-serif;
position: fixed;
background-color: #FFF;
margin-top: 0px;
    }

    .navigation {
height: 75px;
width: px;
float: left;
margin-top: 0px;
margin-left: auto;
padding-top: 20px;
font-family: "geogtq sb";
position: fixed;
background-color: #FFF;
    }

Answer 1

我刚刚测试了你的代码，如果我正确理解你的意思那么它似乎对我有用。看看这段代码。

its also a good idea to add 
* {
margin: 0;
padding: 0;
}

http://jsfiddle.net/4gHuT/2/

Answer 2

你应该改进它并在导航下方留下天蓝线，删除

  <div class="bottom-color"> </div>

并将其替换为 #header 或 #head 的边框底部（我发现其中一个是不必要的）。

你可以重构一下并简化你对div的使用。

也许可以查看你的html和CSS寻找像

这样的bug

width: px;

第54行

我的网站顶部的水平线需要在标题中修复

2 个答案: