您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計綜合問答

HTML/CSS 響應式雙欄布局：左側固定、右側上下分割

編輯：程式設計綜合問答

需求分析

左側佔 50% 寬度，高度 100%，內含圖片/文字。
右側佔 50% 寬度，垂直分為上下兩區，各佔 50% 高度。
整體自適應視窗大小，無滾動條 (或僅區域滾動)。

現代 Flexbox 實作 (推薦)

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>響應式布局</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; } /* 全屏無滾動 */

.container {
    display: flex;
    height: 100%;
}

.left-side {
    flex: 0 0 50%;      /* 固定 50% */
    height: 100%;
    background: #fff9c4;
    padding: 1rem;
    overflow: auto;     /* 內容過多時區域滾動 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.right-side {
    flex: 1;            /* 剩餘 50% */
    height: 100%;
    display: flex;
    flex-direction: column;
}

.right-top, .right-bottom {
    flex: 1;            /* 各佔 50% 高度 */
    padding: 1rem;
    overflow: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.right-top { background: #ffcdd2; }
.right-bottom { background: #c8e6c9; }

/* 響應式：小螢幕改上下堆疊 */
@media (max-width: 768px) {
    .container { flex-direction: column; }
    .left-side, .right-side { flex: none; width: 100%; height: auto; min-height: 50vh; }
    .right-side { flex-direction: column; }
}
</style></head><body>

<div class="container">
    <div class="left-side">
        <h2>左側區塊</h2>
        <img src="left.jpg" alt="左側圖片" style="max-width:100%;height:auto;">
    </div>
    <div class="right-side">
        <div class="right-top"><h2>右上區塊</h2><img src="right1.jpg" alt=""></div>
        <div class="right-bottom"><h2>右下區塊</h2><img src="right2.jpg" alt=""></div>
    </div>
</div>

</body></html>

關鍵 CSS 屬性解析

屬性	作用
`display: flex`	啟用彈性盒模型，子元素自動對齊分配空間
`flex: 0 0 50%`	不縮放、不增長、基準寬度 50%
`flex: 1`	等比分配剩餘空間 (flex-grow:1, flex-shrink:1, flex-basis:0%)
`box-sizing: border-box`	padding/border 計入寬高，避免撐破版面
`overflow: auto`	區域內容超出時出現捲軸，不影響整體布局

Grid 替代寫法 (兩行三列)

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: 100vh;
}
.left-side { grid-row: 1 / 3; } /* 跨兩行 */
.right-top { grid-column: 2; grid-row: 1; }
.right-bottom { grid-column: 2; grid-row: 2; }

Grid 更適合嚴格網格對齊，Flex 更適合單向流式分佈。