Re: [問題] css液態版面如何讓footer置底
我今天研究一下
大概應該是圖檔中的G H這兩個區塊
如果我設成相對定位或無定位
那Footer下方就會多出一整塊背景
高度應該就是這兩區塊高度 可是我希望這兩區塊
也要是液態 文字內容可隨高度調整 我該怎麼定位呢?
目前G是被我設定float:left H是float:right
但是兩個都被我調回絕對定位 下方一整塊空白背景就消失了
只是背景雖然消失但是這兩塊要是內容太長就會蓋到footer
@@ 懇請大家幫我解答!! 謝謝!
※ 引述《niniangel (Molly 茉莉花花)》之銘言：
: 以下是我的問題 版面對我來說可能有點複雜
: 但是這問題我已經研究了好多天都沒解答
: 懇求板上高手得協助!!! 抱歉內容可能有點長!
: 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: 60.251.154.220
推
04/21 03:02, , 1F
04/21 03:02, 1F
→
04/21 03:03, , 2F
04/21 03:03, 2F
→
04/21 03:11, , 3F
04/21 03:11, 3F
推
04/21 14:58, , 4F
04/21 14:58, 4F
討論串 (同標題文章)
本文引述了以下文章的的內容：
完整討論串 (本文為第 2 之 2 篇)：