絕對定位的DIV不會延伸到內容的高度

Question

我有一個絕對定位的包裝div。 是否可以擴展包裝div的高度以容納內容並顯示背景顏色。 在我使用的代碼下面：

的CSS

html, body {
 width: 100%;
 height: 100%;
 margin: 0px;
 padding: 0px;
 border: 0px;
}

body {
 font-family: Arial,sans-serif;
 font-size: 2em;
 line-height: 1.5em;
}

#contentbody {
 position: absolute;
 left: 5px;
 right: 5px;
 top: 5px;
 bottom: 5px;
 background-color: Green;
}

的HTML

<div id="contentbody">
 <div id="content">
  <div style="height: 1500px;">some large content</div>
 </div>
</div>

Answer 1

嘗試在DIV上使用style = "overflow: scroll"

編輯：消除溢出：自動

Answer 2

我不認為您應該在#contentbody設置bottom 。 通過同時設置top和bottom您可以將div的高度強制為瀏覽器視口的高度減去10（頂部+底部）。

Answer 3

將overflow：hidden添加到您的html,body選擇器中，然后將overflow：auto添加到您的#contentbody div中：

        html, body {
         width: 100%;
         height: 100%;
         margin: 0px;
         padding: 0px;
         border: 0px;

         overflow:hidden; /* overflow is hidden */
        }

        body {
         font-family: Arial,sans-serif;
         font-size: 2em;
         line-height: 1.5em;
        }

        #contentbody {
         position: absolute;
         left: 5px;
         right: 5px;
         top: 5px;
         bottom: 5px;
         background-color: Green;

         overflow: auto; /* overflow is auto to allow scrolling */
        }