如何创建一个固定的标题?

I want a header that is displayed at the top where the content always appears below it. The solutions that I've seen use position:fixed which means that if the content (a long table) is scrolled, it appears below the header.

我想要一个标题，显示在顶部，内容总是显示在下面。我看到的解决方案使用了position:fixed，这意味着如果内容(一个长表)被滚动，它就会出现在标题下面。

I want the content to not have a fixed height, since I want to use on different devices.

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

2 个解决方案

#1

I think this is what you're looking for. Basically you need to limit <body> height and wrap a viewport <div> around your <table> that's offset and stretched to screen height using position: absolute, and it should take scrolling away from body by having its own overflow: auto. If you create this viewport you don't even need position: fixed on the header.

我想这就是你要找的。基本上，您需要限制高度，并将viewport

包绕在您的

中，这是偏移并拉伸到屏幕高度的使用位置:绝对的，并且它应该有自己的溢出:auto，以滚动离开身体。如果您创建这个viewport，您甚至不需要位置:固定在header上。

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>

#2

Basically I don't recommend using fixed positioning as it's not stable on some old devices and platforms,the fixed value is the most later supported value in position, so i recommend you using absolute positioning,you can split your html page into two divs, one for header and one for content,and set two divs to absolute positioning but in case of content set overflow to auto.
Here is a sample code

基本上我不建议使用固定定位,因为它不是稳定的一些旧设备和平台,支持的固定值是最晚的价值立场,所以我建议你使用绝对定位,您可以将html页面分为两个div,一个头和一个内容,设置两个div绝对定位,但在内容设置溢流到汽车。这是一个示例代码

            <!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>

you can adjust your header in percentage or absolute values

你可以调整你的标题的百分比或绝对值

#1