html - 两个 div(一个有绝对高度，另一个有滚动条)

Question

我想要的网站风格如下:

图中显示了“OTHER DIV”和“MOTHER DIV”当前的样式。我如何设置其他 div 的样式，例如 .div_top 和 .div_bottom 以便在需要时仅在 .div_bottom 中获得滚动条？

此外，我希望 .div_bottom 中的滚动条在 .div_top 变大(高度)时自行调整:

我认为.div_top 的高度必须是 auto 因为.div_top里面有一个div可以使用 jQuery 隐藏和显示。

@JonasLoerken

这是您的第二个结果。我该如何解决这个问题？

Answer 1

html {
  box-sizing: border-box;  
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  height: 100%;
  flex-flow: row nowrap;
  overflow: hidden;
}


.Aside {
  width: 200px;
  background-color: #333;
}

.Main {
  flex: 1;
  display: flex;
  flex-flow: column nowrap;
}
.Main__header {
  height: 40px;
  min-height: 40px;
  background-color: #777;
}
.Main__content {
  overflow-y: auto;
}

<aside class="Aside">#Aside</aside>
<main class="Main">
  <header class="Main__header">#Header</header>
  <section class="Main__content">
    <h1 class="Main__content-header">#Scroll</h1>
    <p class="Main__content-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </section>
</main>