使用滚动条实现子 div 以显示大内容，同时保持父级和其他兄弟姐妹不变

Question

我有一个特殊的要求，即实现带有滚动条的子元素 div，同时保持父元素和其他同级元素固定在它们的位置，没有其他滚动条。听起来可能有点混乱，让我用例子来解释一下：

Html 页面 - 以下元素的顺序是固定的：

固定尺寸的导航栏假设为 50px。
基于客户输入的动态大小的主要内容。它可以有滚动条。
一些固定尺寸的图片库假设为 100 像素。
固定尺寸的导航栏假设为 50px。

以上语句无非是html个元素。首先，我们将有固定大小的导航栏，假设高度为 50px。

然后我们将拥有我们的主要内容元素，它的宽度将是整页，高度将由客户设置，它可以有滚动条以防内容尺寸更大。假设客户将此元素的高度设置为 950px，而我们正在加载一张 3600x4000 的图像。在这种情况下，该元素应该有滚动条。

然后我们将有一个固定高度为 100px 的画廊。

然后我们的最后一个元素还是固定高度为 50px 的导航栏。

你可以想象这将是我想在页面上显示的唯一内容，并且对于上述所有宽度，将是整页。

这是我想要的结构，但在设计时可能需要考虑一些场景。

根据配置，有时我们显示顶部导航栏，有时显示底部导航栏，有时两者都显示。
无论内容有多大，内容元素都应该能够显示全部内容，可以有滚动条。
根据配置，我们可能会隐藏图库元素。所以，我们可能有也可能没有画廊。
无论我们使用什么设备，它都应该适合。并且应该只有一个滚动条，并且应该在内容区域而不是其他任何地方。
每当我们隐藏或显示任何元素时，内容元素具有固定高度，因此它不能更改，但父元素和其他兄弟元素应调整以适合屏幕。
如果内容元素的尺寸真的很小，那么我们可以使用一些默认值来适应屏幕。

我也尝试了一些东西，但为了避免有多个滚动条，我们不得不修复（在我的屏幕上 780px 是正确的值）高度。同样不适用于不同的屏幕尺寸（设备）。

    <div id="parent" style="height:780px;width:100%;border:blue 2px solid;">
    <div id="navigationTop" style="height:30px;width:100%;border:green 2px solid; text-align:center;">Navigation Top</div>
    <div id="content1" style="height:100%;width:100%;border:red 2px solid;overflow:auto;max-height:950px">
        <div id="content" style="height:950px;width:100%;border:red 2px solid;">
            <img src="https://via.placeholder.com/3600" />
        </div>
    </div>
    <div id="thumbnails" style="height: 100px; width: 100%; border: pink 2px solid; text-align: center;">Thumbnails</div>
    <div id="navigationBottom" style="height: 30px; width: 100%; border: green 2px solid; text-align: center;">Navigation Bottom</div>
</div>

为了摆脱此设置或我尝试使用 jQuery 设置的父项的硬编码修复高度，计算屏幕高度并进行设置。但是还是不行。

 $(document).ready(function () {
        var height = $(document).height();
        document.getElementById('parent').style.maxHeight = height;
    });

我想在纯 CSS 或最小 JS/jQuery 中实现它。请记住，整个页面上应该只有一个垂直和水平滚动条，并且也应该只用于内容。

非常感谢。

Answer 1

更新

html{
  height: 100%;
}
body{
  overflow: hidden;
  padding: 0px;
  margin: 0px;
  height: 100%;
}
#parent{
  overflow: hidden;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#navigationTop{
  height: 30px;
  width: 100%;
  border: green 2px solid;
  text-align: center;
}
#content1{
  height: 100%;
  width: 100%;
  overflow-y: scroll;
}
#content{
  width: 100%;
  height: 100%;
}
#thumbnails{
  height: 100px;
  width: 100%;
  text-align: center;
}
#navigationBottom{
  height: 30px;
  width: 100%;
  text-align: center;
}

<html>
<body>
<div id="parent" style="">
    <div id="parent">
    <div id="navigationTop">Navigation Top</div>
    <div id="content1">
        <div id="content">
            <img src="https://via.placeholder.com/3600" width="300" />
        </div>
        <div id="thumbnails">Thumbnails</div>
    </div>
    <div id="navigationBottom">Navigation Bottom</div>
</div>
</div>
</body>
</html>

在父级使用

#parent{
   overflow:hidden;
}

以及内容

#content{
    overflow:scroll;
}

并且您还为两个 div 元素设置了 id="content"。它只会在最后 div 上显示效果。尝试使用不同的 ID 或使用类。

Answer 2

您可以尝试稍微丢失硬编码值并将它们放入某些类中，同时删除一些可能会相互压制的 ID。在开发工具中，您可以看到哪些样式被忽略了。然后只需在父级上保留一个 id 并根据需要定义高度，宽度，滚动等的方式设置它的样式。例如将类放在主要内容和 sub-content 中，您定义内容应该占用多少设置 overflow 和 sub-content 将只占用您指定的那么多，其余的将是可滚动的。拥有如此多的 ID 会造成混乱并导致工作不正确。

使用滚动条实现子 div 以显示大内容，同时保持父级和其他兄弟姐妹不变

Implment child div with scrollbars to show big content while keeping parent and other siblings intact

html

css

jquery

styles