容器內的div不會滾動

我在<div>裏面有一個動態的<ul>，我想<div>調整到<ul>的大小。這沒有問題。但是，當我用overflow: auto包裝容器<div>上的所有內容時，第一個<div>將不會調整爲<ul>的大小，而是與容器的大小相匹配，因此<ul>和<li>會中斷並濺落到<div>的右邊框中，不滾動水平。容器內的div不會滾動

結構loks像：

<div id="mainContainer"> 
    <div id="iWantToBeHuge"> 
     <ul> 
      <li> Stuff </li> 
     </ul> 
    </div> 
</div>

而CSS：

#mainContainer { 

    width: 200px; 
    height: 500px; 

    float: left; 

    overflow: auto; 

} 

#iWantToBeHuge { 

    width: auto; 
    height: 95%; 

    /* already tried these */ 
    /* position:absolute;  */ 
    /* position:relatve;   */ 
    /* float: left;   */ 

}

http://jsfiddle.net/7EYTh/

而且 - 添加靜態大小的是不是一種選擇，內容可以是任何東西寬度在30px到3000px之間。

來源

2014-07-06 whitelionV

你'＃iWantToBeHuge'寬度設置爲auto，其調整到父母的大小。將其更改爲500像素，魔術應該發生。 – jeremy

是的，我意識到我錯過了那部分，有一個原因我沒有使用固定的大小，內容可以是30px到3000px之間的任何寬度。 – whitelionV

可能重複[展開容器div與內容寬度]（http://stackoverflow.com/questions/6115353/expand-container-div-with-content-width） – jeremy

Jesus Rugama的answer解釋了爲什麼沒有垂直溢出。既然你正在尋找水平溢出，

目前沒有水平溢出你的容器。如果你想要滾動條，你應該創建溢出，例如

#iWantToBeHuge { 
    width: auto; 
    height: 95%; 
    white-space:nowrap; 
}

Demo

來源

2014-07-06 07:01:16

這樣做，你是一個天才。謝謝 – whitelionV

您不應該使用height: 95%;，這意味着當您使用相對高度時，元素將使用父級來確定大小。所以你告訴#iWantToBeHuge使用#mainContainer高度的95％。

如果您想查看滾動條，請嘗試將#iWantToBeHuge高度更改爲比#mainContainer更大的尺寸即600px。或者只是刪除高度風格，以便它可以適應ul。

編輯：嘗試使用這個CSS的水平滾動：

#mainContainer{ 
    width: 200px; 
    height: 600px; 
    overflow: auto; 
} 

#iWantToBeHuge ul li{ 
    white-space: nowrap; 
}

來源

2014-07-06 06:53:47 JesusRugama

對不起，問題不是垂直滾動而是水平滾動。而且我也無法使用固定大小，內容的大小差別很大。 – whitelionV

@whitelionV你沒有提到它的問題。通常當你說'滾動'，尤其是你的演示的外觀，人們認爲它是垂直'滾動' –

@TilwinJoy我編輯了這個問題，試圖讓它變得更清晰。 – whitelionV

容器內的div不會滾動

回答

相關問題