滚动页面时表格内容无法正常隐藏的技术问题求助

你的布局问题核心在于fixed定位元素脱离文档流后，布局偏移计算错误，同时table-container未设置有效高度限制，导致内容无法正确滚动隐藏。以下是修正方案：

关键修改点 #

• 固定元素（header/sidebar/searchbox）使用top/left替代margin-top定位，避免文档流干扰，定位更精准
• 计算table-container的可用高度，让它自适应视口剩余空间
• 给table-content设置滚动属性，确保内容超出时自动滚动

修正后的代码 #

CSS #

* {
  box-sizing: border-box; /* 统一盒模型，避免padding导致宽度溢出 */
  margin: 0;
  padding: 0;
}

#header{
    width: 100%;
    background-color: #880016; 
    height: 50px;
    border-bottom: 4px solid black;
    padding: 10px;
    font-size: 20px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100; /* 确保header在最上层 */
}
#container {
  overflow: hidden;
  display: flex;
  gap: 30px;
}
#sidebar {
  position: fixed;
  top: 70px; /* header总高度：50px高度 + 上下各10pxpadding */
  left: 0;
  width: 100px;
  height: 300px;
  background-color: orange;
  z-index: 99;
}
#table-container {
  margin-top: 120px; /* header70px + searchbox50px */
  margin-left: 130px; /* sidebar100px + gap30px */
  width: calc(100% - 130px);
  height: calc(100vh - 120px); /* 视口高度减去上方固定元素总高度 */
  background-color: lightgrey;
}
#searchbox {
  position: fixed;
  top: 70px;
  left: 130px; /* 对齐table-container的左侧 */
  background-color: aqua;
  width: calc(100% - 130px);
  height: 50px;
  z-index: 99;
}
#table-content {
  height: 100%;
  width: 50%;
  overflow-y: auto; /* 内容超出时垂直滚动 */
  padding: 10px; /* 可选，增加内边距提升体验 */
}

HTML #

<div id="header">
    header header header header header header
</div>
<div id="container">
  <div id="sidebar">
    <p>SideBar</p>
  </div>
  <div id="table-container">
    <div id="searchbox">Searchbox</div>
    <div id="table-content">
      <p>In common usage, data is a collection of discrete or continuous values that convey information, describing the quantity, quality, fact, statistics, other basic units of meaning, or simply sequences of symbols that may be further interpreted formally. A datum is an individual value in a collection of data</p>
      <p>In common usage, data is a collection of discrete or continuous values that convey information, describing the quantity, quality, fact, statistics, other basic units of meaning, or simply sequences of symbols that may be further interpreted formally. A datum is an individual value in a collection of data</p>
      <p>In common usage, data is a collection of discrete or continuous values that convey information, describing the quantity, quality, fact, statistics, other basic units of meaning, or simply sequences of symbols that may be further interpreted formally. A datum is an individual value in a collection of data</p>
      <p>In common usage, data is a collection of discrete or continuous values that convey information, describing the quantity, quality, fact, statistics, other basic units of meaning, or simply sequences of symbols that may be further interpreted formally. A datum is an individual value in a collection of data</p>
      <p>In common usage, data is a collection of discrete or continuous values that convey information, describing the quantity, quality, fact, statistics, other basic units of meaning, or simply sequences of symbols that may be further interpreted formally. A datum is an individual value in a collection of data</p>
      <p>In common usage, data is a collection of discrete or continuous values that convey information, describing the quantity, quality, fact, statistics, other basic units of meaning, or simply sequences of symbols that may be further interpreted formally. A datum is an individual value in a collection of data</p>
      <p>In common usage, data is a collection of discrete or continuous values that convey information, describing the quantity, quality, fact, statistics, other basic units of meaning, or simply sequences of symbols that may be further interpreted formally. A datum is an individual value in a collection of data</p>
      <p>In common usage, data is a collection of discrete or continuous values that convey information, describing the quantity, quality, fact, statistics, other basic units of meaning, or simply sequences of symbols that may be further interpreted formally. A datum is an individual value in a collection of data</p>
      <p>In common usage, data is a collection of discrete or continuous values that convey information, describing the quantity, quality, fact, statistics, other basic units of meaning, or simply sequences of symbols that may be further interpreted formally. A datum is an individual value in a collection of data</p>
      <p>In common usage, data is a collection of discrete or continuous values that convey information, describing the quantity, quality, fact, statistics, other basic units of meaning, or simply sequences of symbols that may be further interpreted formally. A datum is an individual value in a collection of data</p>
    </div>
  </div>
</div>

效果说明 #

• header、sidebar、searchbox将固定在各自位置，不会随页面滚动
• table-container自动适应剩余视口高度，table-content超出高度时会显示滚动条，内容滚动时会被容器边界隐藏，不会溢出

内容的提问来源于stack exchange，提问作者Sanjana S