一、左侧固定
示例一:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.main{
width: 100%;
height: auto;
}
.main div{
height: 80px;
}
#left {
float: left;
width: 220px;
background-color: green;
}
#content {
background-color: orange;
margin-left: 220px;/*==等于左边栏宽度==*/
}
</style>
</head>
<div class="main">
<div id="left">Left sidebar</div>
<div id="content">Main Content</div>
</div>
<body>
</body>
</html>
示例二:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.main{
width: 100%;
height: auto;
position: absolute;
}
.main div{
height: 80px;
}
#left {
float: left;
width: 220px;
background-color: green;
}
#content {
background-color: orange;
position: absolute;
top:0px;
right: 0px;
left: 220px;/*==等于左边栏宽度==*/
}
</style>
</head>
<div class="main">
<div id="left">Left sidebar</div>
<div id="content">Main Content</div>
</div>
<body>
</body>
</html>
示例三.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
height: auto;
}
body {
margin: 0;
padding: 0;
}
#container {
background: #ffe3a6;
}
#wrapper {
display: inline-block;
border-left: 200px solid #d4c376;/*==此值等于左边栏的宽度值==*/
position: relative;
vertical-align: bottom;
}
#sidebar {
float: left;
width: 200px;
margin-left: -200px;/*==此值等于左边栏的宽度值==*/
position: relative;
}
#main {
float: left;
}
#maing,#sidebar{
min-height: 200px;
height: auto !important;
height: 200px;
}
</style>
</head>
<div id="container">
<div id="wrapper">
<div id="sidebar">Left Sidebar</div>
<div id="main">Main Content</div>
</div>
</div>
<body>
</body>
</html>
示例四:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#container{
display: flex;
display: -webkit-flex;
flex-direction: row;
}
#container div{
height: 100px;
}
#sidebar{
background-color: #f09452;
width: 200px;
}
#main{
flex:1;
background-color: #a09f52;
}
</style>
</head>
<div id="container">
<div id="sidebar">Left Sidebar</div>
<div id="main">Main Content</div>
</div>
<body>
</body>
</html>
示例五
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#container{
display:table;
width: 100%;
}
#container #wrapper{
display:table-row;
height: 100px;
width: 100%;
}
#container #wrapper div{
display: table-cell;
}
#sidebar{
background-color: #f09452;
width: 200px;
}
#main{
background-color: #a09f52;
}
</style>
</head>
<div id="container">
<div id="wrapper">
<div id="sidebar">Left Sidebar</div>
<div id="main">Main Content</div>
</div>
</div>
<body>
</body>
</html>
二、右侧固定
示例一:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#container{
width: 100%;
}
#container #wrapper div{
height: 100px;
}
#main{
float: right;
width: 200px;
background-color: #f92;
}
#sidebar{
float: left;
background-color: #29f;
margin-left: -200px;
width: 100%;
}
#container #wrapper:after{
content: ' ';
clear: both;
display: block;
}
</style>
</head>
<div id="container">
<div id="wrapper">
<div id="sidebar">Left Sidebar</div>
<div id="main">Main Content</div>
</div>
</div>
<body>
</body>
</html>
示例二:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#container{
width: 100%;
}
#container #wrapper{
display: flex;
flex-direction: row;
}
#container #wrapper div{
height: 100px;
}
#main{
width: 200px;
background-color: #f92;
}
#sidebar{
background-color: #29f;
flex:1;
}
#container #wrapper:after{
content: ' ';
clear: both;
display: block;
}
</style>
</head>
<div id="container">
<div id="wrapper">
<div id="sidebar">Left Sidebar</div>
<div id="main">Main Content</div>
</div>
</div>
<body>
</body>
</html>