[問題] CSS Div Height的問題

作者: KawasumiMai (さあ、死ぬがいい)   2015-02-10 14:42:12
<div id="A">
<div class="B">
<div class="c"></div>
<div class="d"></div>
</div>
<div class="B">
<div class="c"></div>
<div class="d"></div>
</div>
</div>
架構如上
div#A是主框架
div.B因為要自動排列在A裡面所以用float:left
div.c和div.d因為要"重疊",所以採用position:absolute;去改left跟top
現在的問題是,div.c跟div.d會依照內容自行變更高度,這點沒問題
但是div.B也想要依照內容的div.c和div.d裡面最大高度進行擴展
(這關係到background-color跟border範圍)
用height:auto會直接變成0,修改overflow也沒用
因為感覺起來div.c和div.d是浮貼在上面的
div.b並沒有抓到他們兩個的內容高度
請問css要怎麼解決?
作者: qui0914 (Q)   2015-02-10 15:01:00
請問重疊的意思是?
作者: oToToT (屁孩)   2015-02-10 15:08:00
你改成position:relative就會有高度,但可能要重算
作者: superpai (超級白)   2015-02-10 15:20:00
你這真是個好問題 解答如下http://codepen.io/minipai/pen/dPJYzg
作者: KawasumiMai (さあ、死ぬがいい)   2015-02-10 17:01:00
感謝樓上,的確做出想要的感覺,不過想問細節.c跟.d只要做absolute就會跑版,一定得用float +margin-left:-100% 的方法進行疊合,原因是為什麼?另外能自動判定內容高度的部分是因為box-sizing嗎?
作者: lin009 (lin009)   2015-02-11 01:21:00
.c .d 是 absolute 的話, 定位參考點不一定會是 .B, 可能會往上找應該是這樣啦~ 總之是 absolute 的性質
作者: iamnodoubt (Have Fun)   2015-02-11 03:28:00
用absolute就不是normal flow,簡單講就是跟b不同空間當然撐不開.你硬要用ap,google的答案都是用js處理反而麻煩..

Links booklink

Contact Us: admin [ a t ] ucptt.com