css佈局--父級元素高度自適應
阿新 • • 發佈：2018-12-26
在專案中需要實現這樣一個佈局，子元素相對於父元素絕對定位，其中子元素的高度是確定的，希望父元素能夠自適應子元素的高度，實現兩個div的底沿對齊。
html:
<head> <meta charset="UTF-8"> <title>Document</title> <style> .p{ background: yellow; border: 1px solid green; position: relative; } .c{ position: absolute; left: 10px; top:10px; background: red; width: 100px; height: 100px; } </style> </head> <body> <div class="p"> <div class="c">頂頂頂頂本部是基礎元素的一部分，"mod"是必需內容單元，"grid"內獨立或且可複用的功能區塊，頁面內容的主要承擔者 要點： 自定義命名，以mod-為字首 必須緊接著"grid"/"region" </div> </div> </body>
效果如下：
父元素的高度為0，子元素完全脫離了父元素，原因是：絕對定位的元素脫離了文件流，而高度自適應的前提是文件流佈局,脫離文件流的子元素是不會參與高度計算的。
後來修改了程式碼，將子元素的絕對定位，改為相對定位，子元素沒有脫離文件流，父元素根據子元素的高度（margin+padding+border+height）來計算自己的高度，但是依舊發現子元素仍由一部分超出在父元素之外，怎麼辦呢？
後來我試著給父元素加上padding-bottom，值就是子元素相對定位設定的top，例如.c 的top為10px,最後的結果就是可以自適應（兩個div底沿對齊）。
