前端－带header和footer的双栏布局

最新推荐文章于 2023-04-19 19:39:43 发布

转载最新推荐文章于 2023-04-19 19:39:43 发布 · 458 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mobilefeng/p/5436119.html

文章标签：

#前端 #ViewUI

本文介绍了一种使用左浮动和负margin实现的双栏布局方法，其中包含了一个固定的侧边栏和一个自适应主要内容区域，并通过清除浮动确保了底部元素的正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目标是实现如上图带header和footer的双栏布局，其中右侧sidebar是固定宽度，左侧content是自适应；

https://www.zybuluo.com/dengzhirong/note/169592

这里有双栏布局实现的3种方法：

1.左浮动＋margin

2.绝对定位＋margin-left

3.左浮动＋负margin

这里采用方法3，如下：

HTML

1 <div id="header">header</div>
2 <div id="main">
3     <div id="content">content</div>
4 </div>
5 <div id="sidebar">sidebar</div>
6 <div id="footer">footer</div>

CSS

 1 #header {
 2     background-color: gray;
 3     height: 50px;
 4 }
 5 #main {
 6     width: 100%;
 7     float: left;
 8 }
 9 #content {
10     margin-right: 400px;
11     
12     background-color: red;
13     height: 300px;
14 }
15 #sidebar {
16     width: 400px;
17     float: left;
18     margin-left: -400px;
19     clear: right;
20     
21     background-color: green;
22     height: 100px;
23 }
24 #footer {
25     clear: both;
26 
27     background-color: gray;
28     height: 50px;
29 }