如何在內容對齊到底時顯示滾動條？

我有兩個div中， '外' 和 '內' 是這樣的：
http://jsfiddle.net/WVd9Q/2/如何在內容對齊到底時顯示滾動條？

[HTML]

<div class="outer"> 
    <div class="inner"> 
     <p id="content">Lorem ipsum dolor sit amet...</p> 
    </div> 
</div>

[CSS]

.outer { 
     width:100%; 
     height:100%; 
     left:0; 
     top:0; 
     position:absolute; 
     overflow-y:scroll; 
     z-index: 100; 
    } 
    .inner { 
     position:absolute; 
     bottom:0; 
     left:0; 
     right:0; 
     width:100%; 
     min-width:400px; 
     max-width:800px; 
     margin: auto; 
    }

正如你所看到的，外部覆蓋整個頁面並且內部對齊到底部。
但是，當您單擊[make it long]按鈕使內部變長時，外部不顯示滾動條。
它顯示滾動條，如果我改變底部：0到頂：0在.inner如我所料。

如何顯示外部的滾動條與底部對齊的內部？

附加
好吧，this fiddle是我想要的最終形式。謝謝！

[HTML]

<div class="outer"> 
    <div class="inner"> 
     <div class="content"> 
      <p id="text">Lorem ipsum dolor sit amet...</p> 
     </div> 
    </div> 
</div>

[CSS]

body { 
    overflow-y:hidden; 
} 
.outer { 
    width:100%; 
    height:100%; 
    left:0; 
    top:0; 
    position:absolute; 
    z-index: 100; 
} 
.inner { 
    position:absolute; 
    bottom:0; 
    left:0; 
    right:0; 
    width:100%; 
    max-height:100%; 
    overflow-y:auto; 
} 
.content { 
    min-width:400px; 
    max-width:800px; 
    margin: auto; 
}

來源

2014-07-21 Gongdo Gong

因爲.inner絕對位置ed，它在.outer內沒有大小。在.inner上執行「max-height：100％; overflow-y：scroll」並從外部移除滾動條。另外，提供一個例子/小提琴/ codepen – DoXicK

我明白了。最大高度是我錯過的。感謝您的解決方案。 –

很高興能有所幫助:-) – DoXicK

工作小提琴here。

由於Doxick提到我所做的是從你的outter中刪除overflow-y，爲你的內部div設置一個高度，並添加overflow-y：sroll。

.outer { 
    width:100%; 
    height:100%; 
    left:0; 
    top:0; 
    position:absolute; 
    z-index: 100; 
} 
.inner { 
    position:absolute; 
    bottom:0; 
    left:0; 
    right:0; 
    width:100%; 
    overflow-y:scroll; 
    max-height:100%; 
    min-width:400px; 
    max-width:800px; 
    margin: auto; 
}

來源

2014-07-21 09:49:39 Alexandros

看起來更簡單，謝謝你的小提琴。 –

不客氣：D – Alexandros

嘗試這樣的：Demo

HTML：

<div class="outer"> 
    <div class="inner"> 
     <div class="scroll"> 
      <p id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
      <button id="longButton" type="button">make it long!</button> 
      <button id="shortButton" type="button">make it short!</button> 
     </div> 
    </div> 
</div>

CSS：

body { 
    overflow-y:hidden; 
    height: 100%; 
} 
/*Opera Fix*/ 
body:before { 
    content:""; 
    height:100%; 
    float:left; 
    width:0; 
    margin-top:-32767px; 
} 
.outer { 
    width:100%; 
    z-index: 9999; 
    position: fixed; 
    bottom: 0; 
    left:0; 
    right:0; 
} 
.scroll { 
    width:100%; 
    max-height:260px; 
    z-index: 9999; 
    position:relative; 
    overflow-y:auto; 
} 
.inner { 
    width:100%; 
    height:100%; 
    min-width:400px; 
    max-width:800px; 
    margin: auto; 
    overflow:hidden; 
    position: relative; 
    clear:both; 
} 
/*display*/ 
.scroll { 
    background-color: rgba(0, 255, 255, 0.2); 
} 
.inner { 
    background-color: rgba(255, 255, 255, 0.9); 
    padding: 10px; 
}

來源

2014-07-21 09:57:28

我投了@Doxick的解決方案，但它也是有幫助的，當我需要這樣的設計。謝謝。 –

如何在內容對齊到底時顯示滾動條？

回答

相關問題