您的位置：首页 > Web前端 > CSS

css两列布局，一列固定宽度，另一列自适应宽度

2016-05-02 15:48 573 查看

<!DOCTYPE html>
<html>
<head>
<title>两列之一固定，另一列自适应</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>1-2-1单列变宽布局</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style type="text/css">
*{
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
html {
min-height: 100%;
_height:100%;
height:100%;
}
body {
min-height: 100%;
_height:100%;
height:100%;
}
#all {
background: #EEE;
border-left: 1px solid #ff0000;
border-right: 1px solid #ff0000;
padding: 0 20px 0 20px;
margin: auto;
font: 1.5em arial, verdana, sans-serif;
width: 85%;
min-height: 100%;
_height:100%;
}
#header,#pagefooter,#container {
margin: 0 auto;
width: 85%;
border: 1px solid #000000;
}
#contentwrap {   /*包裹左侧div的容器*/
margin-left: -260px; /*留出位置给右侧固定的div*/
float: left;
width: 100%; /*占满父级的宽度*/
}
#content {
margin-left: 260px; /*显示在contentwrap的右侧*/
border: 1px solid red;
}
#side {
float: right;
width: 260px;
border: 1px solid green;
}
.clearfix::before {
content: "";
display: table;
width: 0;
height: 0;
overflow: hidden;
}
.clearfix::after {
content: "";
clear: both;
display: table;
width: 0;
height: 0;
overflow: hidden;
}
.clearfix {
zoom: 1;
}
</style>
</head>
<body>
<div id="all">
<div id="header">
头部
</div>
<div id="container" class="clearfix">
<div id="contentwrap">
<div id="content">中部内容随网页缩放</div>
</div>
<div id="side">中部侧边固定宽度</div>
</div>
<div id="pagefooter">
我是底部
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css3 布局两列布局

相关文章推荐

新的分享

章节导航