cari

Rumah  >  Soal Jawab  >  teks badan

Item Flexbox akan melimpahi bekas apabila tetingkap terlalu pendek dan bar sisi tidak dapat mengekalkan penjajaran bawah

Saya cuba menggunakan reka letak fleksibel ringkas yang terdiri daripada pengepala, grid kandungan 2x2, dan kemudian bar sisi. Apabila lebar tetingkap lebih kecil daripada saiz tertentu, bar sisi harus bergerak ke bahagian bawah skrin.

Pada masa ini, apabila saiz itu dicapai, jika ketinggian tetingkap dibuat terlalu kecil, kandungan grid akan bertindih di atas pengepala, tetapi saya tidak tahu mengapa ini berlaku. Skrin hendaklah hanya saiz ketinggian paparan, tetapi menggerakkan bar sisi menyebabkannya mengembang. 

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

Ini adalah kod lengkap dalam jsfiddle

(Hanya ubah saiz tetingkap untuk melihat bagaimana grid bertindih di atas tajuk)

P粉226642568P粉226642568234 hari yang lalu463

membalas semua(1)saya akan balas

  • P粉652495194

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

    Salam ^^ Saya membina ini untuk anda. Adakah ini yang anda mahukan? 

    *{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>

    balas
    0
  • Batalbalas