※ 本文轉寄自 tomin.bbs@tomin.twbbs.org 時間: 2011-06-09 16:07:59

---

---

其實有一個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吧！
: 有誤還請神人幫忙更正，謝謝


--


--