Web Layout (網頁排版) - daniel-qa/Vue GitHub Wiki

  • 每一層的高度，都要明確設定，子元件才吃得到 50% 的高度值 ( 上一層的 div ，要明確設定 100%，再上上一層也是如此，不能斷鍊)
  • 上面區塊 = 固定 70%（或至少 70%）, 下面 20%，10%

上面區塊 = 固定 70%（或至少 70%）＋ 內容多就捲動，不要往下撐

<div style="height: 100vh; display: flex; flex-direction: column;">
    <!-- 上方固定高度 + scroll -->
    <div style="height: 70%; overflow-y: auto; background: #f5f5f5;">
        上面固定 70%，內容多會 scroll，不會往下撐
        ...
    </div>

    <!-- 中間固定 20% -->
    <div style="height: 20%; background: #ddd;">
        中間固定 20%
    </div>

    <!-- 底部固定 10% -->
    <div style="height: 10%; background: #bbb;">
        底部固定 10%
    </div>
</div>
  • 切分上下區塊

下方佔20%，上面佔80%

<!-- 分享學校課網頁面-->
<template>
    <!-- 預設佔滿 100vh 可視高度 -->
    <div style="height: 100vh; display: flex; flex-direction: column;">

        <!-- 上面 80%：彈性填滿 -->
        <div style="flex: 1; background: #f5f7fa; border: 1px solid #000;margin:1px;">
                    上面區塊（彈性放大）,至少佔 80%

            <div style="height: 100px; border: 1px solid blue; margin: 2px;"> Test 撐開的高度</div>
            
        </div>

        <!-- 下面固定 20% 高度 -->
        <div style="height: 20%; background: #e0e0e0;">
                    下面區塊（固定 20% 高度）                    
        </div>
    </div>
</template>

  • display: flex → 父容器啟用 Flexbox

  • flex-direction: column → 上下堆疊

  • 上面區塊 flex: 1 → 自動撐滿剩餘空間

  • 下面區塊 height: 20% → 固定高度

  • 加框線
border: 1px solid #000; → 黑色簡單框線

顏色用 red 也可以

// el-row 的中間框線
<el-col :span="12" style="border-right: 1px solid #e8e8e8; box-shadow: 2px 0 4px rgba(0,0,0,0.05); height: 100%; ">
  • 簡單排版原則

沒有 flex → block 排版

有 flex → 預設 row，不會變 block

  • 預設 row 行為示意
[ A ][ B ][ C ]  ← 水平方向排列

所有子元素都在同一行，超出容器寬度 → 預設不換行，而是溢出

要換行必須加：

flex-wrap: wrap;
  • 如果要讓這個區塊真正像全螢幕覆蓋，可以配合定位：
<div style="
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh; 
    z-index: 1000;
    display: flex; 
    flex-direction: column;
">
    <!-- 你的內容 -->
</div>

這樣就能創造出真正的全螢幕覆蓋效果！

  • 在最外層父容器中，100vh 和 100% 會相同。(100% 參考父容器為基準)
⚠️ **GitHub.com Fallback** ⚠️