How to implement a fixed sidebar layout using HTML and CSS

How to use HTML and CSS to implement a fixed sidebar layout

In web design, fixed sidebar layout is a common and practical layout method. With a fixed sidebar layout, we can pin the navigation menu, search bar, or other important content to one side of the webpage so that it remains visible as the page scrolls. In this article, I will introduce how to implement a simple and practical fixed sidebar layout using HTML and CSS, and provide specific code examples.

First, we need to create the basic HTML structure. In the tag of the HTML document, we can use a main container <div> to wrap the entire page content, as shown below: <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>In the above code, we create a main container named <code>container, which contains a sidebar container named sidebar and a container named content The page content container.

Next, we need to use CSS styles to achieve the effect of fixed sidebar. Here, we will use the position: fixed; property to fix the sidebar in the page. The specific CSS style is as follows:

.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;
}

In the above code, we set the container container to display: flex;, so that the sidebar and Page content containers are arranged horizontally. Then, we style the sidebar container, where the width attribute defines the width of the sidebar, height: 100vh; represents the height of the sidebar and The height of the browser window is equal. The background-color attribute defines the background color of the sidebar. position: fixed; Fixed the sidebar in the web page. left: 0; and top: 0; set the position of the sidebar to the upper left corner of the page respectively, overflow-y: auto; means when the content exceeds the height of the sidebar , the display can be scrolled.

In order to prevent the page content from being blocked by the sidebar, we need to style the content container, where margin-left: 200px; represents the distance between the page content container The width of the left sidebar, width: calc(100% - 200px); means that the width of the page content container is equal to the width of the browser minus the width of the sidebar, padding: 20px; Represents the padding of the page content container.

Through the above HTML structure and CSS style settings, we successfully implemented a simple fixed sidebar layout. You can customize the style of the sidebar and page content according to actual needs to meet your design and layout requirements.

It should be noted that this is just an example of a fixed sidebar layout, and you can further customize and expand it according to your specific needs. I hope this article can help you understand and implement fixed sidebar layout.