爲什麼我的容器div無法展開以顯示內容？

我有一個容器div，其中包含一個滑出菜單。這意味着我需要overflow-x：hidden，以便在「摺疊」時菜單不可見。爲什麼我的容器div無法展開以顯示內容？

但是，我想要擴展高度以適應內容。目前它只是添加滾動條。

http://jsfiddle.net/bdgriffiths/ySQgm/8/

我懷疑問題可能是對孩子「菜單中的」元素的彩車做。

的容器DIV的CSS是：

.container { 
    font-family:Arial; Verdana; Sans-serif; 
    background: #efefef; 
    border: 1px solid #bbb; 
    border-bottom: 6px solid magenta; 
    width: 340px; 
    height:auto!important; 
    overflow-x:hidden; 
    overflow-y:auto; 
    position:relative; 
}

，然後選擇菜單由以下內容組成：

.slideout { 
    background: magenta; 
    position: relative; 
    width: 300px; 
    height: 40px; 
    top: 0px; 
    right:-320px; 
    z-index:2; 
} 

.clickme { 
    float: left; 
    height: 40px; 
    width: 20px; 
    background: magenta; 
} 
.slidebutton { 
    color:#fff; 
    height:40px; 
    width:30%; 
    text-align:center; 
    background-color: magenta; 
    float:left; 
}

來源

2013-10-30 Ben

的 '內容' 被設置爲 '的位置是：絕對'。這樣，父元素不會展開。 –

@KilianStinson擊敗了我，正要說:) – SaturnsEye

好點！不過，我會將內容位置設置爲絕對，以使菜單滑過頂部（即，菜單應固定在頂部）。如果我切換到相對位置，菜單div位於內容下方。 – Ben

JSFIDDLE

我更新了小提琴。

.content { 
    z-index:1; 
    /* position: absolute; */ 
    padding:12px; 
    font-size: 0.8em; 
}

問題是在您的.content類中設置的絕對位置。只要將其刪除，父容器隨着高度增加而展開。

爲了讓淡出菜單重疊您的內容，您需要爲您的.slideout類設置絕對位置。

Updated Fiddle

.slideout { 
    position: absolute; 
    right:-290px; 
    ... 
}

來源

2013-10-30 09:05:56

圖例 - 謝謝@kilianStinson。如果我撓撓了我的頭幾年！ – Ben

爲什麼我的容器div無法展開以顯示內容？

回答

相關問題