如何创建固定标头?

时间:2015-02-14 08:12:44

标签: html css

我想要一个显示在顶部的标题,其中内容始终显示在其下方。我见过的解决方案使用position:fixed表示如果内容(长表)滚动,它会显示在标题下方。

我希望内容没有固定的高度,因为我想在不同的设备上使用。

2 个答案:

答案 0 :(得分:0)

基本上我不推荐使用固定定位,因为它在某些旧设备和平台上不稳定,固定值是最后支持的位置值,所以我建议你使用绝对定位,你可以将您的html页面分成两个div,一个用于标题,一个用于内容,并将两个div设置为绝对定位,但如果内容设置溢出为auto。
这是一个示例代码

            <!DOCTYPE html>
            <html>
            <head>
            </head>
            <body>
             <div style="position:absolute;height:20%;width:100%;background-color:red">
             Fixed header with height 20%
             </div>
             <div style="position:absolute;top:20%;height:80%;width:100%;background-color:green;overflow:auto">
             Your scrollable content here
            </div>
             </div>
             </body>
            </html>     

您可以按百分比或绝对值调整标题

答案 1 :(得分:0)

我认为这就是你要找的东西。基本上你需要限制<body>高度,并使用<div><table>围绕你的position: absolute包围,并使用overflow: auto拉伸到屏幕高度,并且应该滚动远离身体拥有自己的position: fixed。如果您创建此视口,则标题上甚至不需要body { height: 100%; margin: 0; padding: 0; overflow: hidden; } * { box-sizing: border-box; } header { padding: 0 10px; position: absolute; top: 0; width: 100%; height: 44px; line-height: 44px; border-bottom: 1px solid; } .viewport { padding: 0 10px; position: absolute; width: 100%; top: 44px; bottom: 0; overflow: auto; } table { width: 100%; border-collapse: collapse; } th, td { margin: 0; text-align: left; height: 44px; vertical-align: middle; border-bottom: 1px solid black; } tr:last-child td { border-bottom: 0; }

<header>Header Title</header>
<div class="viewport">
  <table>
    <thead>
      <tr>
        <th colspan="2">Content Table</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Some key:</td>
        <td>some value</td>
      </tr>
      <tr>
        <td>Some key:</td>
        <td>some value</td>
      </tr>
      <tr>
        <td>Some key:</td>
        <td>some value</td>
      </tr>
      <tr>
        <td>Some key:</td>
        <td>some value</td>
      </tr>
      <tr>
        <td>Some key:</td>
        <td>some value</td>
      </tr>
      <tr>
        <td>Some key:</td>
        <td>some value</td>
      </tr>
      <tr>
        <td>Some key:</td>
        <td>some value</td>
      </tr>
      <tr>
        <td>Some key:</td>
        <td>some value</td>
      </tr>
      <tr>
        <td>Some key:</td>
        <td>some value</td>
      </tr>
      <tr>
        <td>Some key:</td>
        <td>some value</td>
      </tr>
    </tbody>
  </table>
</div>
{{1}}