简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首页
文章
问答
课程
专题
下载
手游
词典
最近更新

首页  >  问答  >  正文

Flexbox项目在窗口过短时会溢出容器，同时侧边栏无法保持底部对齐

我正在尝试使用一个简单的弹性布局，其中包括一个标题、一个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中的完整代码

(只需调整窗口大小，就可以看到网格如何重叠在标题上方)

P粉226642568P粉226642568186 天前385

全部回复(1)我来回复

  • P粉652495194

    P粉6524951942024-03-31 12:37:11

    你好 ^^ 我为你构建了这个。这是你想要的吗？

    *{margin: 0px; padding: 0px;}
html{height: 100%; width: 100%;}
body{background-color: lightblue;}

/* Header, Main Content, Nav/Sidebar */
header{background-color: lightgray; height: 50px;}
.Main{background-color: darkblue; display: grid; grid-template-columns: 1fr 80px;}
nav{background-color: pink; width: 100%; outline: 5px solid white;}

/* Rows */
.Main .Row1, .Main .Row2{display: grid; grid-template-columns: 50% 50%; height: 120px;}
/* Row 1 */
.Main .Row1 .Div1{margin: 5px; background-color: lightgreen;}
.Main .Row1 .Div2{margin: 5px; background-color: forestgreen;}
/* Row 2 */
.Main .Row2 .Div3{margin: 5px; background-color: forestgreen;}
.Main .Row2 .Div4{margin: 5px; background-color: lightgreen;}

/* Smaller Size */
@media (max-width:960px) {
.Main{background-color: blue; grid-template-columns: auto;}
nav{height: 50px;}
}
    <body>
<header>
    <h1>Header</h1>
</header>

<section class="Main">
<div>
    <div class="Row1">
        <div class="Div1">Div1</div>
        <div class="Div2">Div2</div>
    </div>
    <div class="Row2">
        <div class="Div3">Div3</div>
        <div class="Div4">Div4</div>
    </div>
</div>

<nav>
    <h1>Sidebar</h1>
</nav>
</section>
</body>

    回复
    0
  • 取消回复