Comment implémenter une disposition de barre latérale fixe en utilisant HTML et CSS

Comment utiliser HTML et CSS pour implémenter une disposition de barre latérale fixe

Dans la conception Web, la disposition de barre latérale fixe est une méthode de mise en page courante et pratique. Avec une disposition de barre latérale fixe, nous pouvons épingler le menu de navigation, la barre de recherche ou tout autre contenu important sur un côté de la page Web afin qu'il reste visible pendant le défilement de la page. Dans cet article, je présenterai comment implémenter une disposition de barre latérale fixe simple et pratique en utilisant HTML et CSS, et fournirai des exemples de code spécifiques.

Tout d’abord, nous devons créer la structure HTML de base. Dans la balise du document HTML, nous pouvons utiliser un conteneur principal <div> pour envelopper l'intégralité du contenu de la page, comme indiqué ci-dessous : <code>标签中，我们可以使用一个主容器 <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;rrreee

Dans le code ci-dessus, nous créons un conteneur principal nommé container, qui contient un conteneur de barre latérale nommé sidebar et un conteneur nommé content code> conteneur de contenu de page . <p></p>Ensuite, nous devons utiliser des styles CSS pour obtenir l'effet de barre latérale fixe. Ici, nous utiliserons l'attribut <code>position:fixed; pour corriger la barre latérale de la page. Le style CSS spécifique est le suivant :

rrreee

Dans le code ci-dessus, nous définissons le conteneur container sur display: flex;, ce qui peut rendre la barre latérale et le contenu de la page conteneurs sont disposés horizontalement. Ensuite, nous stylisons le conteneur sidebar, où l'attribut width définit la largeur de la barre latérale, et height: 100vh; représente la barre latérale. height est égal à la hauteur de la fenêtre du navigateur. L'attribut background-color définit la couleur d'arrière-plan de la barre latérale position : fixe ; fixe la barre latérale dans la page Web. left: 0; et top: 0; définissent respectivement la position de la barre latérale dans le coin supérieur gauche de la page, overflow-y: auto; code> Indique que lorsque le contenu dépasse la hauteur de la barre latérale, il peut défiler. 🎜🎜Afin d'éviter que le contenu de la page ne soit bloqué par la barre latérale, nous devons définir le style du conteneur <code>content, où margin-left: 200px; signifie que le conteneur de contenu de la page est positionné à partir de la gauche. La largeur de la barre latérale, width: calc(100% - 200px); signifie que la largeur du conteneur de contenu de la page est égale à la largeur du navigateur moins la largeur de la barre latérale, padding : 20px; Représente le remplissage du conteneur de contenu de la page. 🎜🎜Avec la structure HTML et les paramètres de style CSS ci-dessus, nous avons réussi à implémenter une mise en page simple et fixe de la barre latérale. Vous pouvez personnaliser le style de la barre latérale et du contenu de la page en fonction de vos besoins réels pour répondre à vos exigences de conception et de mise en page. 🎜🎜Il convient de noter qu'il ne s'agit que d'un exemple de disposition de barre latérale fixe, et que vous pouvez la personnaliser et l'étendre davantage en fonction de vos besoins spécifiques. J'espère que cet article pourra vous aider à comprendre et à mettre en œuvre une disposition fixe de la barre latérale. 🎜