四つのレイアウト
- （1）左右両側には、固定幅200pxのを残し
適応は右いっぱい。
- （2）、3つの固定200pxの、適応充填中間について、右、左。
- （3）、下位3行、高いヘッド200pxの、200pxの高い底部に、中間適応は充填しました。
- 上記の内容は、その後、フッタが底部に固定されているより少ない場合内容場合（4）、2つの部分が、一定の高さ200pxの下で、フッタがダウン混雑置きます。
まず、最初に
画像は以下の:(左、右、左200pxの幅固定、右適応塗りつぶし）
コードは以下の通りであります：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>布局1</title>
<link rel="stylesheet" href="dio.css"/>
</head>
<body>
<div class="first"></div>
<div class="second"></div>
</body>
</html>.first,.second{height:100px;}
.first{
width:200px;
background-color:yellow;
float:left;
}
.second{
background-color:red;
position:absolute;
right:0px;
left:200px;
width:100%;
}x第二に、第二
画像は以下の:( 3列に低く、高いヘッド200pxの、200pxの高下、中央の適応塗りつぶし）に
コードは以下の通りであります：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>布局2</title>
<link rel="stylesheet" href="dio2.css"/>
</head>
<body>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</body>
</html>.left,.center,.right{height:400px;}
.left{
width:200px;
background-color:yellow;
float:left;
}
.center{
background-color:red;
position:absolute;
right:200px;
left:200px;
}
.right{
width:200px;
float:right;
background-color:green;
}第三に、第三
次のようにイメージは以下のとおりです。次の3行では、高いヘッド200pxの、200pxの高下、中央の適応塗りつぶし
コードは以下の通りであります：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>布局3</title>
<link rel="stylesheet" href="dio3.css"/>
</head>
<body>
<div class="top"></div>
<div class="center"></div>
<div class="bottom"></div>
</body>
</html>body{margin:0px;}
.top{
width:100%;
height:200px;
position:absolute;
background:red;
}
.center{
width:100%;
position:absolute;
background:blue;
top:200px;
bottom:200px;
}
.bottom{
width:100%;
height:200px;
position:absolute;
bottom:0px;
background:black;
} 第四に、第四
内容は、ダウンしぎゅうぎゅう詰め底に置く場合は、上記の内容は、その下には、下部に固定されているより少ない場合は固定の高さ200pxの下に2つの部分を、次のように画像があります。
コードは以下の通りであります：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>布局4</title>
<link rel="stylesheet" href="dio4.css"/>
</head>
<body>
<div class="top">
aijefoaiejfoaiejfaio<br/>
........
</div>
<div class="bottom"></div>
</body>
</html>html{
height:100%;
}
body{
margin:0px;
min-height:100%;
position:relative;
background:red;
}
.top{
padding-bottom:300px;
}
.bottom{
position:absolute;
width:100%;
height:200px;
background:black;
bottom:0px;
left:0px;
}エラーが通知してください場合