html - 尝试使用 CSS 在 HTML 中获取特定布局

Question

这是我的场景：

我有一个固定位置的 DIV 元素（我们称之为“包装”）。它不能从窗口边缘溢出 100px 的边距。

在这个 div 内还有 3 个其他的 DIV（“第一”、“第二”和“第三”）。

只有“第三个”DIV 具有固定高度，并且应始终位于包含“包装”DIV 的底部。

问题是我希望 'wrap' DIV 占据尽可能小的屏幕高度。如果完全显示“第一”和“第二”，我希望它缩小它的高度，如果没有，则滚动“第二”。

我觉得很难解释，所以我希望你能明白。如果您需要任何澄清，请问我任何事情。

我在CodePen上为它创建了一支笔，您可以使用它来分叉和玩耍。

没有 JS，我无法成功实现这一目标。

非常感谢您的帮助...谢谢。

Answer 1

您可以在样式表中使用@media为不同的屏幕尺寸创建自定义样式，例如

@media screen and (max-width: 800px) {
  #wrapper {
    width: 90%;
    min-width: 0;
  }
  #column-main {
    margin-left: 0;
  }
  #column-sidebar {
    width: auto;
    float: none;
  }
}

访问这里以获得更好的解释。