最近意识到自己的 css 布局基础不太扎实,然后突发奇想给自己定个简单的题目,实现完后查阅资料,无意中找到一篇简单又很详细的 好文章。
首先题目是:
- 左侧固定宽度,右侧自适应屏幕宽;
- 左右两列,等高布局;
- 左右两列要求有最小高度,例如:200px;(当内容超出 200 时,会自动以等高的方式增高)
- 要求不用 JS 或 CSS 行为实现;
一、两列布局:左边固定宽度,右边自适应宽度
方法一:浮动布局
采用左侧浮动+宽度,右侧 margin-left :左侧宽度值,实现左侧固定右侧自适应的布局效果。
html
<div class="container">
<div id="left">Left sidebar</div>
<div id="right">Main Content</div>
</div>
CSS
*{
margin:0;
padding: 0;
}
.container{
min-width: 500px;
}
#left{
float: left;
width:200px;
height: 250px;
background-color: #999;
}
#right{
height: 250px;
margin-left: 200px;
background-color: #ccc;
}
效果如下:
上面这种实现方法最关键之处就是自适应宽度一栏“div#right”的“ margin-left ”值要等于固定宽度一栏的宽度值
若使用这种方法,实现右侧固定宽度,左侧自适应的话,基本一致,但DOM顺序改变,如下:
HTML
<div class="container">
<div id="right">
Right sidebar
</div>
<div id="left">
Main Content
</div>
</div>
CSS
*{
margin:0;
padding: 0;
}
.container{
min-width: 500px;
}
#left{
margin-right: 210px;
height:250px;
background-color: #999;
}
#right{
float: right;
width: 200px;
height: 250px;
background-color: #ccc;
}
方法二:浮动和负边距实现
由于上述方法实现,会导致DOM顺序与显示效果不一致,解决方案,在自适应栏(左侧栏)加一层浮动的宽度为100%的包裹层,左侧栏设置 margin-right:固定宽度栏的宽度。固定宽度栏设置浮动和宽度,并且设置 margin-left: -宽度值,如下:
HTML
<div class="leftContainer">
<div id="left">
Main Content
</div>
</div>
<div id="right">
right sidebar
</div>
CSS code
*{
margin:0;
padding: 0;
}
.leftContainer{
float: left;
width: 100%;
}
#left{
margin-right: 220px;
height: 250px;
background-color: #999;
}
#right{
float: right;
width: 200px;
margin-left: -100%;
height: 250px;
background-color: #ccc;
}
方法三:设置绝对定位。宽度固定栏设置 position:absolute+ left/right+ top + width ,自适应栏设置 margin-left/margin-right: 固定宽度栏宽度。如下
HTML
<div class="container">
<div id="left">
left sidebar
</div>
<div id="right">
Main Content
</div>
</div>
CSS
*{
margin:0;
padding: 0;
}
.container{
min-width:400px;
}
#left{
position: absolute;
width: 200px;
height: 450px;
left: 0;
top:0;
background-color: #999;
}
#right{
margin-left: 220px;
height: 450px;
background-color: #ccc;
}
二、等高布局
建议先阅读《八种创建等高列布局》,里面详细介绍了八种等高布局的方法,并附有相关代码,而且我们后面的运用中也使用了其中的方法。
三、最小高度
min-height:200px;
height:auto !important;
height:200px;
以上的代码轻松的帮我们实现了跨浏览器的最小高度设置问题。
最终实现代码如下:
方法一:
固定宽度另一侧自适应 : 使用两栏浮动并一栏设置宽度+ margin 负值
等高列布局:使用边框模仿等高列
html
<div id="container">
<div id="wrapper">
<div id="sidebar">Left Sidebar</div>
<div id="main">Main Content</div>
</div>
</div>
CSS
*{
margin: 0;
padding: 0;
}
#container{
background: #ffe3a6;
}
#wrapper{
border-left: 200px solid #d4c376;
display: inline-block;
vertical-align: bottom;
position: relative;
}
#sidebar{
float: left;
width: 200px;
margin-left: -200px;
position: relative;
}
#main{
float:left;
}
#main{
min-height: 200px;
height: auto !important;
height: 200px;
}
方法二:
一侧固定一侧自适应:使用一侧设置浮动+宽度,另一侧设置margin
等高列布局:使用正padding和负margin对冲
html
<div id="container">
<div id="left" class="aside">Left Sidebar</div>
<div id="content" class="section">Main Content</div>
</div>
CSS
*{
margin: 0;
padding: 0;
}
#container {
overflow: hidden;
}
#left {
background: #ccc;
float: left;
width: 200px;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
#content {
background: #eee;
margin-left: 200px;/*==此值等于左边栏的宽度值==*/
margin-bottom: -99999px;
padding-bottom: 99999px;
}
#left,
#content {
min-height: 200px;
height: auto !important;
height: 200px;
}
方法三:
html
<div id="container">
<div id="content">Main Content</div>
<div id="sidebar">Left Sidebar</div>
</div>
CSS
*{margin: 0;padding: 0;}
#container{
background-color:#0ff;
overflow:hidden;
padding-left:220px; /* 宽度大小等与边栏宽度大小*/
}
* html #container{
height:1%; /* So IE plays nice */
}
#content{
background-color:#0ff;
width:100%;
border-left:220px solid #f00;/* 宽度大小等与边栏宽度大小*/
margin-left:-220px;/* 宽度大小等与边栏宽度大小*/
float:right;
}
#sidebar{
background-color:#f00;
width:220px;
float:right;
margin-left:-220px;/* 宽度大小等与边栏宽度大小*/
}
#content,
#sidebar {
min-height: 200px;
height: auto !important;
height: 200px;
}
方法四:
一侧固定一侧自适应:使用一侧设置浮动+宽度,另一侧设置 margin
等高:给容器 div 使用单独的背景色
html
<div id="container2">
<div id="container1">
<div id="col1">Left Sidebar</div>
<div id="col2">Main Content</div>
</div>
</div>
CSS
*{padding: 0;margin:0;}
#container2 {
float: left;
width: 100%;
background: orange;
position: relative;
overflow: hidden;
}
#container1 {
float: left;
width: 100%;
background: green;
position: relative;
left: 220px;/* 宽度大小等与边栏宽度大小*/
}
#col2 {
position: relative;
margin-right: 220px;/* 宽度大小等与边栏宽度大小*/
}
#col1 {
width: 220px;
float: left;
position: relative;
margin-left: -220px;/* 宽度大小等与边栏宽度大小*/
}
#col1,#col2 {
min-height: 200px;
height: auto !important;
height: 200px;
}
方法五:
一侧固定一侧自适应使用:浮动+负边距
等高列布局使用:使用正 padding 和负 margin 对冲
html
<div id="container1">
<div id="container">
<div id="left">Left Sidebar</div>
<div id="content">
<div id="contentInner">Main Content</div>
</div>
</div>
</div>
- 上面所有 DEMO 中,要注意其方向性的配合,并且值要统一,如果您想尝试使用自己布局需要的宽度值,请对照相关代码环节进行修改;
- 上面所有 DEMO 中,没有设置他们之间的间距,如果您想让他们之间有一定的间距,有两种方法可能实现,其一在上面的 DEMO 基础上修改相关参数,其二,在相应的里面加上 “div” 标签,并设置其 “padding” 值,这样更安全,不至于打破你的布局。
- 因为我们这里有一列使用了自适应宽度,在部分浏览器下,当浏览器屏幕拉至到一定的大小时,给我们带来的感觉是自适应宽度那栏内容像是被隐藏,在你的实际项目中最好能在“body”中加上一个 “min-width” 的设置。