suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Flexbox-Elemente laufen über den Container hinaus, wenn das Fenster zu kurz ist und die Seitenleiste die untere Ausrichtung nicht beibehalten kann

Ich versuche, ein einfaches Flex-Layout zu verwenden, das aus einer Kopfzeile, einem 2x2-Inhaltsraster und dann einer Seitenleiste besteht. Wenn die Breite des Fensters eine bestimmte Größe unterschreitet, sollte die Seitenleiste an den unteren Bildschirmrand verschoben werden.

Sobald diese Größe erreicht ist und die Höhe des Fensters zu klein gemacht wird, überlappt derzeit der Rasterinhalt über der Kopfzeile, aber ich weiß nicht, warum das passiert. Der Bildschirm sollte nur die Größe der Ansichtshöhe haben, aber durch Verschieben der Seitenleiste wird diese vergrößert. 

@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%;
        }
      }
    }
}

Dies ist der vollständige Code in jsfiddle

(Ändern Sie einfach die Fenstergröße, um zu sehen, wie sich das Raster über dem Titel überlappt)

P粉226642568P粉226642568264 Tage vor502

Antworte allen(1)Ich werde antworten

  • 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>

    Antwort
    0
  • StornierenAntwort