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

Question

这是我的场景:

我有一个固定位置的 DIV 元素(我们称它为“wrap”)。它不得超出窗口边缘 100 像素的边距。

在这个 div 中有 3 个其他 DIV('first'、'second' 和 'third')。

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

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

我觉得有点难以解释，所以我希望你能明白。如果您需要任何说明，请问我。

我在 CodePen 上为它创建了一支笔你可以 fork 和玩。

如果没有 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;
  }
}

访问here以获得更好的解释。