[問題] css液態版面如何讓footer置底
以下是我的問題 版面對我來說可能有點複雜
但是這問題我已經研究了好多天都沒解答
懇求板上高手得協助!!! 抱歉內容可能有點長!
http://mollylife.pixnet.net/album/photo/147666746#pictop
以上網誌是網頁架構 上方Menu和下方Footer中間包含內容的最外層
是設定絕對定位 A區塊是設定相對定位因為其高度會隨內容延伸
B和C是絕對定位 因為不會更動到 D E F G H則是一起在被包在一層DIV裡
這些區塊都會隨文字內容高度會伸縮 而D E F G 會因為A區塊延伸而下降
我的問題是要怎麼讓Footer可以隨這些內容剛好在他置底的位置不會下面多出一大塊空白呢?
我現在調整好部分是液態可以隨內容成長後
不知為何Footer畫面下面都會多出一大塊空白呢? 是不是我Div或是css有設定居要修改
懇請板上高手給我協助!!! 謝謝!!!
以下是HTML
<div id="all">
<div id="a">
<ul>
<li>TestTest</li>
</ul>
</div>
</div>
</div><!--a-->
<div id="D_E_F_G_H">
<div id="D">
</div>
<div id="E">
</div>
<div id="F">
</div>
<div id="G">
</div>
<div id="H">
</div>
</div>
<div id="B">
</div>
<div id="C">
</div>
<div id="Footer">
<table border="0" align="center" cellpadding="1" cellspacing="1" style="TEXT-ALIGN: center">
<tbody>
<tr>
<td width="100%"
align="center" valign="middle" class="black6_11_H" style="TEXT-ALIGN: center"><table width="450" border="0" align="center" cellpadding="0" cellspacing="1">
<tbody>
<tr valign="middle">
<td style="TEXT-ALIGN: center; LINE-HEIGHT: 13pt; FONT-FAMILY: PMingLiU, Arial; COLOR: #666666; FONT-SIZE: 11px; TEXT-DECORATION: none"
class="black6_11_H" align="center">Footer</td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
</div>
css:
body {
margin: 0px;
padding: 0px;
font-size: 12px;
color: #000000;
background-color: #ffa7a7;
font-family:Arial, Helvetica, sans-serif;
width: 100%;
height: auto;
}
#all {
width:1014px;
z-index:1;
top: 192px;
left: 77px;
position: absolute;
float: left;
clear: both;
margin-bottom: -300px;
display: block;
}
#a {
position: relative;
left: 6px;
top: 8px;/*670px;*/
width: 701px;
height: auto;
border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: hidden;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #a3a3a3;
border-bottom-color: #a3a3a3;
border-left-color: #a3a3a3;
padding-top: 410px;
background-repeat: repeat-y;
background-image: url(images/17P_w.png);
float: left;
}
#D_E_F_G_H {
left: 3px;
top: 20px;
width: 100%;
float: left;
position: relative;
clear: both;
margin-bottom: -650px;
display: block;
}
#D {
width: 452px;
background-color: #FFF;
font-size: 13px;
color: #000;
margin-bottom:8px;
letter-spacing:1px;
line-height: 19px;
clear: both;
float: left;
}
#E {
position: relative;
width: 452px;
background-color: #FFF;
font-size: 13px;
color: #9d53e8;
margin-bottom:20px;
letter-spacing:1px;
line-height: 19px;
float: left;
clear: both;
}
#F {
position: relative;
width: 452px;
background-color: #FFF;
font-size: 13px;
color: #9d53e8;
margin-bottom:8px;
letter-spacing:1px;
line-height: 19px;
float: left;
clear: both;
}
#G {
left: 10px;
top: -660px;
width: 249px;
font-size: 13px;
color: #373737;
letter-spacing:1px;
line-height: 19px;
background-color: #FFF;
float: left;
position: relative;
}
#H {
position:relative;
width:255px;
height:auto;
z-index:2;
left: 20px;
top: -760px;
float: left;
}
#Footer {
width:700px;
height:auto;
z-index:1;
left: 200px;
top: 100px;
clear: both;
position: relative;
}
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.136.243.70
→
04/20 00:27, , 1F
04/20 00:27, 1F
→
04/20 00:57, , 2F
04/20 00:57, 2F
→
04/20 00:59, , 3F
04/20 00:59, 3F
→
04/20 10:22, , 4F
04/20 10:22, 4F
→
04/20 10:22, , 5F
04/20 10:22, 5F
→
04/20 10:22, , 6F
04/20 10:22, 6F
推
04/20 13:20, , 7F
04/20 13:20, 7F
→
04/20 13:20, , 8F
04/20 13:20, 8F
→
04/20 16:19, , 9F
04/20 16:19, 9F
→
04/20 16:19, , 10F
04/20 16:19, 10F
→
04/20 16:22, , 11F
04/20 16:22, 11F
→
04/20 17:17, , 12F
04/20 17:17, 12F
討論串 (同標題文章)
以下文章回應了本文：
完整討論串 (本文為第 1 之 2 篇)：