DIV开始固定报头后面，而不是下面标头和上述标头，如用户滚动

http://jsfiddle.net/bobbyrne01/zL7hzwpu/DIV开始固定报头后面，而不是下面标头和上述标头，如用户滚动

html是可见..

<div id="playerView"> 
    <div id="header" class="parentWidth"> 
     <table class="childWidth"> 
      <tr> 
       <td> 
        <audio id="player" preload="auto" class="childWidth" controls></audio> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <div class="left"> 
         <img id="previousTrack" src="../images/previous-24.png" alt="Previous" /> 
         <img id="stopTrack" src="../images/stop-24.png" alt="Stop" /> 
         <img id="nextTrack" src="../images/next-24.png" alt="Next" /> 
        </div> 
        <div class="right"> 
         <img id="repeatAll" src="../images/repeatAll-24.png" alt="RepeatAll" /> 
         <img id="random" src="../images/random-24.png" alt="Random" /> 
        </div> 
       </td> 
      </tr> 
     </table> 
     <hr/> 
     <table class="parentWidth"> 
      <tr> 
       <td> 
        <input id="search" type="text" class="childWidth" /> 
       </td> 
      </tr> 
     </table> 
    </div> 
    <div id="content">Song 1 
     <br/>Song 2 
     <br/>Song 3 
     <br/>Song 4 
     <br/>Song 5 
     <br/>Song 6 
     <br/>Song 7 
     <br/>Song 8 
     <br/>Song 9 
     <br/>Song 10 
     <br/>Song 11 
     <br/>Song 12 
     <br/>Song 13 
     <br/>Song 14 
     <br/>Song 15 
     <br/>Song 16 
     <br/>Song 17 
     <br/>Song 18 
     <br/>Song 19 
     <br/>Song 13 
     <br/>Song 20 
     <br/>Song 21 
     <br/>Song 22 
     <br/>Song 23 
     <br/>Song 24 
     <br/>Song 25 
     <br/>Song 26 
     <br/>Song 27 
     <br/>Song 28 
     <br/>Song 29 
     <br/>Song 30 
     <br/>Song 31 
     <br/>Song 32 
     <br/>Song 33 
     <br/>Song 34 
     <br/>Song 35 
     <br/>Song 36 
     <br/>Song 37 
     <br/>Song 38 
     <br/>Song 39 
     <br/>Song 40 
     <br/> 
    </div> 
</div>

css ..

.childWidth { 
    width: 100%; 
} 
.parentWidth { 
    width: 98%; 
} 
.left { 
    float: left; 
} 
.right { 
    float: right; 
} 
#header { 
    background-color: #ccc; 
    position: fixed; 
} 
#content { 
    background-color: #aaa; 
}

问题1.（滚动前）#content未启动#header

before scroll

问题2.（后滚动）#content高于#header可见的用户向下滚动页面。理想情况下，我仍希望看到#header之上的空格，因为<audio>元素的持续时间保持可见。

after scroll

来源

2015-01-20 bobbyrne01

只是一个侧面说明，除了显示表格数据之外，你应该避免使用'table'。 – kgh 2015-01-20 18:59:59

好点，我只是发现它更容易定位元素与表快速然后css有时 – bobbyrne01 2015-01-20 19:20:21

如果你想使其更小，并有滚动仅控制＃内容，你应该修改你的CSS艾克这个

#content { 
    position: fixed; 
    top: 120px; 
    height: 70%; 
    background-color: #aaa; 
    overflow-y: scroll; 
    width: 98%; 
}

高度可以

你选择设置它。但在jeneral我会与Raphael Serota的这个建议。

来源

2015-01-20 19:28:54

顶部这实际上是相当不错，我没有只考虑'＃content'元素上的滚动条 – bobbyrne01 2015-01-20 19:39:49

务必检查如何在其他浏览器中重现此操作，您将需要添加-ms-overflow-style属性。 – 2015-01-20 19:49:59

此用户界面专门用于Firefox插件，但很了解 – bobbyrne01 2015-01-20 20:53:41

与position: fixed元素从文档流中去除，这意味着在页面上他们不“占用空间”。因此，下一个div出现在它下面，因为没有任何东西强制它。将margin-top添加到等于固定导航栏高度的div，它应该看起来如何。

要将固定标题正好显示在页面的顶部，请将top:0添加到它。

来源

2015-01-20 18:57:49

使用'顶部：0;''＃头'削减持续时间指标 – bobbyrne01 2015-01-20 19:19:36

对页面正文使用填充顶部，并将顶部：0添加到页眉。至于上面的空白区域，您可以使用纯白色边框。

的CSS：

#header { 
    background-color: #ccc; 
    position: fixed; 
    top: 0; 
    border-top: 6px solid #fff; 
} 
body { 
    padding-top: 120px 
}

Updated fiddle

来源

2015-01-20 19:02:55

DIV开始固定报头后面，而不是下面标头和上述标头，如用户滚动

回答

相关问题