整理：电子商务专业实践网
5、举一反三，利用上面的原理我们还可以做一个一边固定宽度一边自适应宽度的液态弹性布局，修改一些宽度然后给 #content-box 下面再套一层就可以实现了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Footer Stick</title>
<style type="text/css">
/*<![CDATA[*/
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
text-align: center;
font: 12px/1.4 Verdana, sans-serif;
}
#wrapper {
width: 100%;
min-height: 100%;
background: #ccc;
margin: auto;
text-align: left;
}
* html #wrapper {
height: 100%;
}
#header {
background: Green;
height: 40px;
}
#out-content {
padding-bottom: 50px;
}
#out-content:after {
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}
* html #out-content {
height: 1%;
}
#sidebar {
float: left;
background: Gray;
margin-right: -200px;
width:200px;
}
#content-box {
float: right;
width: 100%;
background: Olive;
}
#content {
margin-left: 200px;
}
#footer {
height: 50px;
background: Background;
margin: -50px auto 0;
}
/*]]>*/
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h3>header</h3>
<code>#header {
background: Green;
height: 40px;
}</code> </div>
<div id="out-content">
<div id="content-box">
<div id="content">
<h3>content</h3>
<code>#content {
float: right;
width: 80%;
background: Olive;
} </code></div>
</div>
<div id="sidebar">
<h3>sidebar</h3>
<code>#sidebar {
float: left;
width: 20%;
background: Gray;
}</code> </div>
</div>
</div>
<div id="footer">
<h3>footer</h3>
<code>#footer {
height: 50px;
background: Background;
width:770px;
margin: -50px auto 0;
}</code> </div>
</body>
</html> |
网络技术
