[問題] position:absolute時 外層元素的高度設定

[a517981 (Azure)]

假設html如下

<div id="container">
    <div class="frame">
        <div class="content">
            文字內容
        </div>
    </div>
    <div class="frame">
        <div class="content">
            文字內容
        </div>
    </div>
</div>


CSS設定如下

#container {
    width:1000px;
    background-color:#FFF;
}
.frame {
    width:500px;
    float:left;
}
.content {
    width:500px;
    position:absolute;
    top:0;
    left:0;
}

因為兩個文字內容的行數不同

所以兩個.content的內容會不一樣高

又因為.content設定成absolute的關係

所以.frame和#container的高度都是0



目前的解決辦法是當DOM載入完之後

再把.frame的高度等於.content的高度

但覺得動到js有點小題大做XD

所以請問一下有沒有純CSS的解法呢？

--
http://www.wretch.cc/blog/a517981

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 140.117.71.119
※ 編輯: a517981         來自: 140.117.71.119       (04/23 22:07)
→ terlin10:如果只是要撐高.frame的高度，那就在裡面包一個空的div
→ terlin10:然後設clear:both;
→ a517981:我試過了耶 clear:both好像只能撐高float @@
→ a517981:如果position:absolute好像不行
→ terlin10:你既然都設absolute了，為什麼還要撐高呢？
→ terlin10:設absolute的話，它就脫離串流了，自然也沒辦法撐高
→ a517981:因為我需要做兩層的設計 .frame裡面還會放其他東西@@
→ terlin10:設relative不能嗎？
→ a517981:所以希望.frame和.content兩層高度是一樣的
→ terlin10:因為當你設absolute的時候，它會脫離串流，也就是在該
→ terlin10:區塊不會保留它的位置，所以自然的也沒辦法撐高就是了
→ terlin10:所以要撐高的話，還是請設為relative吧！
→ superpai:請都用float