如何使用HTML和CSS實作一個固定側邊欄佈局

如何使用HTML和CSS實作一個固定側邊欄佈局

#在網頁設計中，固定側邊欄佈局是一種常見且實用的佈局方式。透過固定側邊欄佈局，我們可以將導覽功能表、搜尋列或其他重要內容固定在網頁的一側，使其在捲動頁面時保持可見性。在本文中，我將介紹如何使用HTML和CSS實作一個簡單而實用的固定側邊欄佈局，並提供具體的程式碼範例。

首先，我們需要建立基本的HTML結構。在HTML文件的標籤中，我們可以使用一個主容器<div> 來包覆整個頁面內容，具體如下所示：<pre class='brush:html;toolbar:false;'>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;固定侧边栏布局&lt;/title&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&quot;container&quot;&gt; &lt;div class=&quot;sidebar&quot;&gt; &lt;!-- 侧边栏内容 --&gt; &lt;/div&gt; &lt;div class=&quot;content&quot;&gt; &lt;!-- 页面内容 --&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre><p>在上述程式碼中，我們建立了一個名為<code>container 的主容器，其中包含一個名為sidebar 的側邊欄容器和一個名為content 的頁面內容容器。

接下來，我們需要使用CSS樣式來實現固定側邊欄的效果。在這裡，我們將使用 position: fixed; 屬性來固定側邊欄在頁面中。具體的CSS樣式如下所示：

.container {
    display: flex;
}

.sidebar {
    width: 200px;
    height: 100vh;
    background-color: #f1f1f1;
    position: fixed;
    left: 0;
    top: 0;
    overflow-y: auto;
}

.content {
    margin-left: 200px;
    width: calc(100% - 200px);
    padding: 20px;
}

在上述程式碼中，我們將container 容器設定為display: flex;，這樣可以讓側邊欄和頁面內容容器水平排列。然後，我們對sidebar 容器進行樣式設置，其中width 屬性定義了側邊欄的寬度，height: 100vh; 表示側邊欄的高度和瀏覽器視窗的高度相等，background-color 屬性定義了側邊欄的背景顏色，position: fixed; 將側邊欄固定在網頁中，left: 0; 和top: 0; 分別將側邊欄的位置設定在頁面的左上角，overflow-y: auto; 表示當內容超出側邊欄高度時，可滾動顯示。

為了讓頁面內容不被側邊欄遮擋，我們需要對content 容器進行樣式設置，其中margin-left: 200px; 表示頁面內容容器距離左側邊欄的寬度，width: calc(100% - 200px); 表示頁面內容容器的寬度等於瀏覽器寬度減去側邊欄的寬度，padding: 20px;表示頁面內容容器的內邊距。

透過如上的HTML結構和CSS樣式設置，我們成功實現了一個簡單的固定側邊欄佈局。你可以根據實際需求自訂側邊欄和頁面內容的樣式，以滿足你的設計與排版要求。

要注意的是，這只是固定側邊欄佈局的一種範例，你可以根據具體需求進行進一步的客製化和拓展。希望本文能對你理解和實現固定側邊欄佈局有所幫助。