我正在尝试使用一个简单的弹性布局,其中包括一个标题、一个2x2的内容网格,然后是侧边栏。当窗口的宽度小于某个特定大小时,侧边栏应该移动到屏幕底部。
目前,一旦达到该大小,如果将窗口的高度调得太小,网格内容将会重叠在标题上方,但我不知道为什么会这样。屏幕应该只是视图高度的大小,但侧边栏的移动会导致其扩展。
@media (max-width:960px) { .main-screen { height: 100vh; display: flex; flex-direction: column-reverse; .toolbar { padding: 10px; height: 90px; width: auto; } .body { display: flex; .grid { flex: 1; max-height: 36vh; } .row1, .row2 { flex: 1; height: 10%; max-width: 100%; } } } }
这是在jsfiddle中的完整代码
(只需调整窗口大小,就可以看到网格如何重叠在标题上方)
你好 ^^ 我为你构建了这个。这是你想要的吗?