要求:
1、两个盒子在同一行
2、右边的盒子需要占满剩下的空间
3、两个盒子不能重叠
方式一: 左侧栏宽度不固定
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>两列自适应布局</title>
<style>
*{padding: 0;margin: 0;}
html,body{width:100%;height:100%;}
#wrap{
width: 100%;
height: auto;
min-height: 100%;
}
#header{
width: 100%;
height: 30px;
background: grey;
}
.container{
width: 100%;
padding-bottom: 30px;
}
/*父元素添加伪元素样式清除浮动,处理float的子元素无法撑开父元素高度问题*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.sideBox{
float:left;
width:30%;
color:#FFF;
background: #999;
}
.mainBox{
float:right;
width:70%;
color:#FFF;
background: #333;
}
#footer{
position: relative;
width: 100%;
height: 30px;
margin-top: -30px;
background: grey;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">头部信息</div>
<div class="container clearfix">
<div class="mainBox">
主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域
主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域
主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域
主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域
主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域
主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域
</div>
<div class="sideBox">
侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏
侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏
侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏
侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏
侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏
侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏
</div>
</div>
</div>
<div id="footer">底部信息</div>
</body>
</html>
方式二: 左侧栏宽度固定
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>两列自适应布局</title>
<style>
*{padding: 0;margin: 0;}
#header{
width: 100%;
height: 30px;
background: grey;
}
.container{
width: 100%;
height: auto;
margin:10px 0;
}
/*父元素添加伪元素样式清除浮动,处理float的子元素无法撑开父元素高度问题*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.mainBox{
display: inline-block;
width: 100%;
margin-left: -100px;
background: #333;
}
.mainBoxContent{margin-left: 110px;}
.sideBox{
float: left;
position: relative;
width: 100px;
background: #999;
}
#footer{
width: 100%;
height: 30px;
position: relative;
background: grey;
}
</style>
</head>
<body>
<div id="header">头部信息</div>
<div class="container clearfix">
<div class="mainBox">
<div class="mainBoxContent">
主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域
主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域
主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域
主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域
主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域
主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域
</div>
</div>
<div class="sideBox">
侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏
侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏
侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏
</div>
</div>
<div id="footer">底部信息</div>
</body>
</html>