使一个固定 div 而另一个可滚动

Question

我想要的是让顶部 div 固定在顶部，第二个 div 应该是可滚动的。两个 div 的列宽应该相同。

我试图通过 position: fixed 完成它，但是，div 的列并不完全在另一列之下。

不正确：

这就是我想要的：

代码示例如下所示：

td,
th {
  width: 4%;
  text-align: center;
  vertical-align: middle;
  word-break: break-word;
}

.mainContainer {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 1rem 0 1rem;
  background-color: blueviolet;
}

.fixed {
  position: fixed;
  height: 7rem;
  padding: 0 1rem 0 1rem;
  background-color: orange;
}

.scrollable {
  margin-top: 7rem;
  background-color: lightgreen;
}

<div class="mainContainer">
  <div class="fixed">
    <table style="table-layout: fixed;">
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
      <tr>
        <td>Company 1</td>
        <td>Contact 1</td>
        <td>Country 1</td>
      </tr>
      <tr>
        <td>Company 1</td>
        <td>Contact 1</td>
        <td>Country 1</td>
      </tr>
    </table>
  </div>
  <div class="scrollable">
    <table style="table-layout: fixed;">
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
      <tr>
        <td>Company 1</td>
        <td>Contact 1</td>
        <td>Country 1</td>
      </tr>
      <tr>
        <td>Company 1</td>
        <td>Contact 1</td>
        <td>Country 1</td>
      </tr>
    </table>
  </div>
</div>

Answer 1

试试这个：

.fixed {
    position: sticky;
    top: 0px;
    height: 7rem;
    background-color: orange;
}

.scrollable {
   
    background-color: lightgreen;
}

https://jsfiddle.net/vz6tjwsp/

编辑：将 top 从 1px 更改为 0px。

Answer 2

这应该很适合您。本质上，我只是仔细检查并清理了所有内容并为 mainContainer 提供了一些滚动功能。只要确保在滚动 div 之后你想要的任何内容仍然嵌套在 mainContainer div.

中

td,
th {
  width: 4%;
  text-align: center;
  vertical-align: middle;
  word-break: break-word;
}

.mainContainer {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: blueviolet;
  max-height: 170px;
  overflow-y: scroll;
}

.fixed {
  position: sticky;
  top: 0;
  height: 7rem;
  padding: 0 1rem 0 1rem;
  background-color: orange;
  max-width: 100%;
}

.scrollable {
  background-color: lightgreen;
  padding: 0 1rem 0 1rem;
  max-width: 100%;
}

body {
  overflow-y: hidden;
}

<div class="mainContainer">
  <div class="fixed">
    <table style="table-layout: fixed;">
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
      <tr>
        <td>Company 1</td>
        <td>Contact 1</td>
        <td>Country 1</td>
      </tr>
      <tr>
        <td>Company 1</td>
        <td>Contact 1</td>
        <td>Country 1</td>
      </tr>
    </table>
  </div>
  <div class="scrollable">
    <table style="table-layout: fixed;">
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
      <tr>
        <td>Company 1</td>
        <td>Contact 1</td>
        <td>Country 1</td>
      </tr>
      <tr>
        <td>Company 1</td>
        <td>Contact 1</td>
        <td>Country 1</td>
      </tr>
    </table>
  </div>
  <p style="color: #fff; text-align: center;"> some other content here that is still nested in the main-container div </p>
</div>

使一个固定 div 而另一个可滚动

Make one fixed div and another scrollable

html

css

html-table