在絕對定位的div內滾動div

我無法讓div滾動誰的父容器絕對定位。在絕對定位的div內滾動div

HTML

<div class="container"> 
    <div class="stream page"> 
    <div class="stream-content"> 
    <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut odio libero, posuere in tortor quis, malesuada ullamcorper ante. Morbi sed orci nisi.</h2> 
    </div> 
    </div> 

    <div class="detail page"> 
    </div> 
</div>

CSS

.container { 
    background-color: pink; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    overflow: hidden; 
} 

.page { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

.detail { 
    background-color: blue; 
    left: 425px; 
} 

.stream { 
    background-color: green; 
    width: 425px; 
} 

.stream-content { overflow-y: scroll }

來源

2013-09-27 Dan Christian

我想你只需要一個'height'增加您的.container，.page和.stream內容元素 – Pattle

你需要給.stream-content div的高度。

.stream-content { 
    height: 100%; 
    overflow-y: scroll }

小提琴：http://jsfiddle.net/6akz6/

來源

2013-09-27 11:51:20 Coop

您是對的。雖然我剛剛意識到這是一個封閉的EmberJS div在我的應用程序中需要100％的高度以及這個。我正在失明。謝謝。 –

的流內容類只是改變

.stream-content { 
    overflow-y: scroll; 
    height: 200px; //Set according to your requirement 
}

來源

2013-09-27 11:53:39

你div.stream-content高度沒有限制，其含量使得它比div.container高，這就是爲什麼滾動條在它是無效的。但div.container有overflow:hidden，這就是爲什麼你只看到內容被截斷和滾動不活動。

另外在其他的答案提出可以使div.stream-content與滾輪容器，並刪除它overflow-y規則的解決方案：

.stream { 
    background-color: green; 
    width: 425px; 
    overflow-y: scroll; 
}

http://codepen.io/anon/pen/pEvrg

來源

2013-09-27 11:59:04 keaukraine

在絕對定位的div內滾動div

回答

相關問題