HTML / CSS 两层布局分别可滚动答案

【问题标题】：HTML / CSS two layered layout separately scrollableHTML / CSS 两层布局分别可滚动
【发布时间】：2023-01-19 21:14:24
【问题描述】：

大家好，

我正在寻找构建这样的布局，但我很难找到正确的方法来做到这一点。我玩过两个 position = absolute 的 div，但它不能满足我的所有要求。关于如何在右侧面板上获得顶部导航以及固定子导航的任何建议？

html {
  width: 100%;
  height: 100%;
}

#leftCol {
  background: #ddd;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 80%;
  overflow: auto;
  padding: 2em;
  font-size: 16px;
}

#rightCol {
  background: #bbb;
  position: absolute;
  left: 20%;
  top: 0;
  bottom: 0;
  right: 0;
  overflow-y: auto;
  padding: 2em;
  font-size: 66px;
}

<body style="padding: 0; margin: 0;">

  <div>test</div>

  <div id="leftCol">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu ligula turpis, in euismod velit. Sed suscipit commodo nisl ac tempor. Donec eu nulla eros. Donec tortor justo, eleifend eu consectetur at, fermentum a semidunt rhoncus auctor.</p>

  </div>
  <div id="rightCol">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu ligula turpis, in euismod velit. Sed suscipit commodo nisl ac tempor. Donec eu nulla eros. Donec tortor justo, eleifend eu consectetur at, fermentum a sem. Vestibulum tempus velit
      vel neque rutrum congue. Donec vehicula dictum mi, sit amet suscipit augue rhoncus vitae. Curabitur tempus auctor bibendum. Sed sodales iaculis egestas. Suspendisse consectetur elementum ligula et imperdiet. Proin in velit eu arcu dapibus faucibus.
      Vivamus fringilla adipiscing mauris ac condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse ut nibh ac nulla tempus malesuada. Ut congue, arcu quis semper pellentesque, nunc quam
      volutpat libero, a rhoncus metus sem eu dolor. Vestibulum lacinia augue sit amet nibh imperdiet eu volutpat nibh egestas. Suspendisse luctus laoreet mattis. Proin in euismod augue. Duis tincidunt rhoncus auctor.</p>


  </div>

</body>

谢谢！缩略词

【问题讨论】：

提示：不要使用绝对位置，你可以使用 flexbox 或 grid 来获得这种布局

标签： html css layout

【解决方案1】：

您需要在可滚动项目上设置固定高度，并且需要将垂直溢出设置为滚动。

无论如何我就是这样做的：

.createForm form {
    height: 80vh !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    margin-bottom: 50px;
}

希望这可以帮助！

【讨论】：

你确定使用 !important 是个好主意吗？