如何爲包含的內容製作div調整高度？

Question

我有一個「maincontent」div，它包含我的內容。有一些JavaScript（Fancybox）在其中顯示圖像。我試圖讓div的高度自動更改以配合其中的任何內容，以便div本身不滾動，但是整個網頁都可以。

這裏有一個網頁，我想修復：http://willryan.us/content/photo.html

我試着用最小的高度，高度搞亂：汽車，溢出：汽車，等等，沒有結果。高度：自動充當思想文本是div中唯一的東西，就像完全忽略javascript圖像一樣。

這裏是我的CSS，因爲它是現在：

div#content { 
overflow:auto; 
width:958px; 
height: 800px; 
position:absolute; 
top:50px; 
left:0px; 
background-color:#C0CACE; 

border:1px solid; 
border-color:#616161; 

-webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 1); 
box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 1); 
z-index:1; 

}

Answer 1

你的問題在於使用絕對定位。對於常規文檔流使用靜態定位（默認），您不會遇到此問題。

UPDATE

你也不使用相對定位。

常規文檔流程（沒有明確指定它）是position: static;您使用絕對。絕對定位基本上將元素從文檔的常規流程中取出，並將其放置在距離它最近的相對位置的父級。

你應該怎麼做... 如果你需要你的包裝位於「中心」。將「包裝」設置爲positon:relative與margin: 0px auto;並從所有內部元素中移除絕對位置。如果你需要在包裝器中使用padding/margin縮進元素。

Answer 2

這個問題與photobox div有關，如果你關閉絕對位置，它可以工作到它的高度，關閉高度，它適合。

如果您不需要絕對定位，則可以避免此問題。

你應該使用相對定位來重建你的頁面。考慮到你只需要將你正在使用的div與text-align:center;放在父母身上，應該很容易。

Answer 3

我會建議你 使用 position: relative 不要在你的maincontent孩子中使用position:absolute。你在這裏並不需要絕對。

1. 刪除#content高度（或使用最小高度）
2. 刪除#photobox高度（或使用最小高度）如果需要的話
3. 刪除#content溢出
4. 設置所有#content孩子的位置相對（使用餘量）

。

div#header { 
    background-image:url(content/assets/elements/header.png);backround-repeat:none; 
    width:960px; 
    height:50px; 
    z-index:2; 
    -webkit-border-radius: 10px 10px 0px 0px; 
    border-radius: 10px 10px 0px 0px; 
    -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 1); 
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 1); 
} 

div#footer { 
    background-image:url(content/assets/elements/footer.png); 
    backround-repeat:none; 
    width:960px; 
    height:50px; 
    z-index:2; 
    -webkit-border-radius: 0px 0px 10px 10px; 
    border-radius: 0px 0px 10px 10px; 
    -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 1); 
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 1); 
} 

div#content { 
    width:958px; 
    background-color:#C0CACE; 
    border:1px solid; 
    border-color:#616161; 
    -webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 1); 
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 1); 
    z-index:1; 
    overflow: visible; 
} 

div#photobox { 
    width: 769px; 
    margin-left: 95.5px; 
}