ページレイアウト-3つのバー-左、中央のバー固定-右のバーは自動的に右または左、中のバーの下に適応します.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> </title>
<STYLE type="text/css">
*{ margin:0; padding:0}
body{ text-align:center
#wrapper{
margin-left:auto;
margin-right:auto;
text-align:left;
}
#header,#footer{
clear:both;
text-align:center;
}
h1,p{padding:10px;}
#main{
float:left;
width:720px;
}
#content{
float:right;
width:480px;
height:360px;
color:#333;
background-color:#efefef;
}
#extrabar{
float:left;
width:240px;
height:360px;
color:#fff;
background-color:#6666CC;
}
.box{
float:left;
width:240px;
height:120px;
}
#sidebar{ float:left;}
.minwidth{
width:720px;
}
.maxwidth{
width:960px;
}
.minwidth #sidebar{
width:720px;
}
.maxwidth #sidebar{
width:240px;
}
.s1{
color:#fff;
background-color:#6600CC;
}
.s2{
color:#fff;
background-color:#6666CC;
}
.s3{
color:#fff;
background-color:#6633CC;
}
</STYLE>
<SCRIPT type="text/javascript">
//from http://www.collylogic.com/?/comments/redesign-notes-1-width-based-layout/
wraphandler = {
init: function() {
if (!document.getElementById) return;
// set up the appropriate wrapper
wraphandler.setWrapper();
// and make sure it gets set up again if you resize the window
wraphandler.addEvent(window,"resize",wraphandler.setWrapper);
},
setWrapper: function() {
// width stuff from ppk's http://www.evolt.org/article/document_body_doctype_switching_and_more/17/30655/index.html
var theWidth = 0;
if (window.innerWidth) {
theWidth = window.innerWidth
} else if (document.documentElement &&
document.documentElement.clientWidth) {
theWidth = document.documentElement.clientWidth
} else if (document.body) {
theWidth = document.body.clientWidth
}
if (theWidth != 0) {
if (theWidth < 1000) {
document.getElementById('wrapper').className = 'minwidth';
} else {
document.getElementById('wrapper').className = 'maxwidth';
}
}
},
addEvent: function( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( 'on'+type, obj[type+fn] );
} else {
obj.addEventListener( type, fn, false );
}
}
}
wraphandler.addEvent(window,"load",wraphandler.init);
</SCRIPT>
</head>
<body>
<DIV id="wrapper" class="minwidth">
<DIV id="header">
<H1> </H1></DIV>
<DIV id="main">
<DIV id="content">
<P> .. . div</P>
<P> .. . .. ..</P>
<P> .. .. .</P>
<P> ：<A title=" ." href="http://www.collylogic.com/?/comments/redesign-notes-1-width-based-layout/"> ( )</A></P></DIV>
<DIV id="extrabar">
<P> ID extrabar ...</P></DIV></DIV>
<DIV id="sidebar">
<DIV class="box s1">
<P> ID sidebar 1</P></DIV>
<DIV class="box s2">
<P> ID sidebar 2</P></DIV>
<DIV class="box s3">
<P> ID sidebar 3</P></DIV></DIV>
<DIV id="footer">
</body>
</html>
コード:
http://www.zzsck.org/js/css/1187.html