1
私はこのレイアウトをしています（画像：http://www.pricedesignstudio.com/download/divs.png参照）問題がありました... 100％幅（footerBottom）のフッターも上に下部のコンテンツブロック（containerA）とページの下部との間の垂直方向のスペースを埋める。私はこれに似た何かを追加のフッターの絶対位置とZインデックスを使って動作させていますが、最適ではないと思います。とにかく、私が考えるよりも簡単にコードを表示することができます。入力があれば教えてください。前もって感謝します！Crazy div構造CSS - 助けてください
html, body {
text-align: center;
margin: 0;
padding: 0 0 0 0;
height: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: #fff url(images/bkgrnd_main.png) repeat-y center top;
}
.container {
width: 970px;
min-height: 95%;
position: relative;
border: none;
text-align: center;
margin: 0 auto 0 auto;
padding: 0 0 0 0;
position:relative;
}
.containerA {
display:block;
min-height: 300px;
position: relative;
border: none;
text-align: left;
margin: 0 0 0 -10px;
padding: 0 12px 0 0;
position:relative;
background:#fff;
z-index:100;
}
.containerB {
display:block;
min-height: 300px;
position: relative;
border: none;
text-align: left;
margin: 0 -10px 0 0;
padding: 0 12px 0 0;
position:relative;
background:#fff;
z-index:100;
}
.container .inner {
display:block;
width:94%;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
line-height:150%;
color: #666;
padding:12px 0 20px 0;
margin:0 auto;
border-top:solid 1px #ccc;
}
#header {
height: auto;
width: 100%;
padding: 12px 0 12px 12px;
margin: 0 0 0 0;
background-color: #fff;
display: block;
float: none;
clear: both;
position:relative;
text-align: left;
}
#headerTop {
padding: 0 0 0 0;
margin: 0 0 0 0;
background-color: #fff;
display: block;
min-height:80px;
width:100%;
position:absolute;
top:1;
z-index:0;
}
#footer {
width: 100%;
height:100%;
margin: 0 0 0 0;
padding: 8px 0 0 0;
background-color: #fff;
display: block;
float: none;
clear: both;
text-align: center;
position:absolute;
bottom:0;
z-index:1;
}
#footerBottom {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #999;
padding: 0 0 0 0;
margin: 0 0 0 0;
background-color: #fff;
display: block;
min-height:60px;
width:100%;
position:absolute;
bottom:1;
z-index:0;
text-align:center;
}
<div id="headerTop"></div>
<div class="container">
<div id="header"></div>
<div class="containerA"></div>
<div class="containerB"></div>
<div class="containerA"></div>
<div id="footer"></div>
</div>
PhotoshopやIllustratorのファイルを実際にデザインしたことがありますか？もしそうなら、それを '.png'としてエクスポートし、私たちにそれを示してください。あなたのイメージと説明は役に立ちますが、あなたが望むものを理解することはまだ難しいです。あまりにも苦労することなく、私はCSSを大幅に削減することができたと思います。これまでのところ、.containerの 'min-height：95％'を '100％'に変更しています。これはフッタがページの一番下に表示されるようにします。私はIE7を見て、IE7の見た目が悪かったのを見て、私はIEをあきらめました（IE8のCompatibility Modeで見てください）。 – thirtydot
お返事ありがとうございます！ 10人の担当者が必要なため画像をアップロードできないので、モックアップへのリンクは http://www.pricedesignstudio.com/download/screen1.png http://www.pricedesignstudio.com/download/screen2にリンクしています。 png 私はまだMacでIEのCSSをテストしていませんが、それはファンキーだと思います。 –
「白い背景がかなり整列していない」という効果は意図的であり、望ましいことですか？ – thirtydot