作者a517981 (Azure)
看板Web_Design
標題Re: [問題] 這個站的左方欄怎麼設與右方等高?
時間Mon May 16 14:37:59 2011
其實有一個bug技
<div id="container">
<div id="left">左方欄</div>
<div id="right">右方欄</div>
</div>
在左右兩欄都加入以下屬性
padding-bottom:10000px;
margin-bottom:-10000px;
然後在外面那層加入
overflow:hidden
整理後css如下
#container {
width:1000px; /*自行修改*/
overflow:hidden;
}
#left {
width:500px; /*自行修改*/
float:left;
padding-bottom:10000px;
margin-bottom:-10000px;
}
#left {
width:500px; /*自行修改*/
float:left;
padding-bottom:10000px;
margin-bottom:-10000px;
}
沒意外的話就會左右兩欄等高了
可以在左右兩欄都加上背景顏色檢查看看
※ 引述《terlin10 (小Ya)》之銘言:
: ※ 引述《luciya (浮雲翩躚)》之銘言:
: : http://www.feu.edu.tw/adms/sdc/IDC/index.html
: : 這是我之前做網頁所遇到的難題
: : 左方那一個區塊無法依右方的高度來變化
: : 不知道有沒有相關的解決辦法呢???
: : p.s.CSS的原始碼按右鍵就可以看到了
: : 在此先感謝您的解答^^
: 雖然我沒有實際做過
: 但是我的想法是這樣的…
: 用一個DIV包住左右兩個區塊
: 假設其id為wrap
: 然後設wrap的background-color為你左方的區塊的顏色
: 這時候左邊區塊的顏色不要設定,這樣就會是wrap的背景色
: 相對的,右方區塊的顏色要設為white(依你網站的顏色)
: 最後再包一個空的div區塊在最後,假設其id='clear'
: 這時候的狀況應該是這樣…
: <div id='wrap'>
: <div id='left'>content</div>
: <div id='right'>content</div>
: <div id='clear'></div>
: </div>
: 最後再設css...
: #clear{
: margin:0;
: padding:0;
: border:0;
: clear:both;
: }
: 這樣應該可以達到你要的效果了
: 不過正如一開始所說…
: 我沒測過,但是理論上應該ok吧!
: 有誤還請神人幫忙更正,謝謝
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 61.223.224.5
推 luciya:讚讚讚~~~這個bug技好用耶~,太感謝您了(~^O^~) 05/16 17:42
推 Rplus:同樣的html結構 #countainer{backgroundcolor:#XXX;} 05/17 17:41
推 Rplus:#right{background-color:#FFF;} 05/17 17:44
推 konois:學習了! 05/18 13:44