CSS两列自适应高度DIV（高度自动增加）兼容ie和firefox

最新推荐文章于 2022-09-20 10:42:32 发布

置顶 Yusg1991

最新推荐文章于 2022-09-20 10:42:32 发布

阅读量1.4k

点赞数

文章标签： ie css div stylesheet class xhtml

本文将指导您如何使用HTML和CSS创建具有2列布局，左侧固定宽度，右侧自适应，包含头部、导航、主要内容和底部区域的网页。通过提供的示例代码，您可以轻松地将文字内容添加到页面中。

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

第一步，先新建两个文件index.html和style.css
文件内容分别如下：

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>2列左侧固定右侧自适应宽度，未知高度+头部+导航+尾部</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="header"></div>
<br class="clearfloat" />
<div id="menu">

</div>
<br class="clearfloat" />
<div id="mainContent">
<div id="sidebar">

</div>
<div id="content">

</div>
</div>
<br class="clearfloat" />
<div id="footer">
</div>
</div>
</body>
</html>

style.css

/*2009-10-28 add by wong*/
body {
font-family:Verdana;
font-size:14px;
margin:0;
}

#container {
margin:0 auto;
width:100%;
}
#header {
height:100px;
background:#9c6;
margin-bottom:5px;
}
#menu {
height:30px;
background:#693;
margin-bottom:5px;
}
#mainContent {
margin-bottom:5px;
}
#sidebar {
float:left;
width:200px;
background:#cf9;
}
#content {
margin-left:205px !important;
margin-left:202px;
height:auto !important;
height:100px;
background:#ffa;
}
/*当content设定高度后，3像素会跑到content外侧，这样，我们用!important修正在ie下向左多浮动2像素，加上3像素的bug正好是5像素，所以在火狐和IE下显示是一样的*/
#footer {
height:60px;
background:#9c6;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}

到此为止，你可以向里面添加文字内容了，“content”会随着内容的增加而增加。