0
私は特別な2列のレイアウトを考え出しています。特集2 CSSを使った列レイアウト
は、基本的に、これらの要件
- 一定の幅であり、
- 高100％
- ヘッダーとフッター常に可視
- 2列の内容（メイン - 右）を中心
- メインカラムスクロールをオーバーフロー時
- 右欄固定
これまでのコードは以下のとおりです。私はちょうど全体のレイアウトを の中心に置くことができなかった。 「マージン：0自動www.onlinesportcenter.com
CODE
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SPECIAL 2 COLUMN LAYOUT</title>
<style type="text/css">
body {
margin:0;
border:0;
padding:0;
height:100%;
max-height:100%;
background:#fff;
font-family:arial, verdana, sans-serif;
font-size:76%;
overflow: hidden;
}
* html body {
padding:120px 0 20px 0;
}
#header {
position:absolute;
top:0;
left:0;
width:1004px;
height:119px;
overflow:auto;
background:#73a2bd;
border-bottom:1px solid #35759a;
text-align:center;
}
* html #header {height:120px;}
#header p {
color:#fff;
margin:2px 0 0 0;
}
#header ul {
clear:both;
text-align:center;
border-top:1px solid #73a2bd;
}
#header ul {
margin:0;
padding:0;
list-style-type:none;
background:transparent;
height:3em;
}
#header ul li {
display:inline;
color:#73a2bd;
}
#container {
font-family: Arial, sans-serif;
font-size: 1.2em;
position:fixed;
top:120px;
left:0;
bottom:20px;
right:0;
background:#fff;
padding:0;
width:1004px;
}
* html #container {
height:100%;
width:1004px;
}
#container img {margin:5px;}
#main {
width:774px;
height:100%;
float:left;
overflow:auto;
}
#right {
width:228px;
height:100%;
float:right;
border-left:1px solid #73a2bd;
border-right:1px solid #73a2bd;
}
#footer {
position:absolute;
bottom:0;
left:0;
width:1004px;
height:19px;
overflow:auto;
text-align:center;
background:#73a2bd;
border-top:1px solid #35759a;
}
* html #footer {height:20px;}
#footer p {
color:#fff;
margin:2px 0 0 0;
}
</style>
</head>
<body>
<div id="header">
<p>HEADER</p>
</div>
<div id="container">
<div id="main">
<p>
MAIN
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</p>
</div>
<div id="right">
<p>
RIGHT
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</p>
</div>
</div>
<div id="footer">
<p>FOOTER</p>
</div>
</body>
</html>
は助けをありがとうございました。それはすべての主要なブラウザで動作するようです。 誰かがレイアウトを改善するために他に何か改善がありますか？ – user1212592