简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Item Flexbox akan melimpahi bekas apabila tetingkap terlalu pendek dan bar sisi tidak dapat mengekalkan penjajaran bawah
P粉226642568
P粉226642568 2024-03-31 00:03:58
0
1
377

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粉226642568
P粉226642568

membalas semua(1)
P粉652495194
P粉6524951942024-03-31 12:37:11 Tingkat 1

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>
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！