这是我的场景:
我有一个固定位置的 DIV 元素(我们称它为“wrap”)。它不得超出窗口边缘 100 像素的边距。
在这个 div 中有 3 个其他 DIV('first'、'second' 和 'third')。
只有“第三个”DIV 具有固定高度,并且应始终位于包含“wrap”DIV 的底部。
问题是我希望'wrap' DIV 占据尽可能小的屏幕高度。我希望它在“第一”和“第二”完全显示时缩小高度,如果没有显示则滚动“第二”。
我觉得有点难以解释,所以我希望你能明白。 如果您需要任何说明,请问我。
我在 CodePen 上为它创建了一支笔你可以 fork 和玩。
如果没有 JS,我无法成功实现这一目标。
非常感谢您的帮助... 谢谢。
最佳答案
您可以使用 @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以获得更好的解释。
关于html - 尝试使用 CSS 在 HTML 中获取特定布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16463911/