如何將動態高度的div上的可滾動內容居中？

我正在製作一個網絡應用程序，目前我正在嘗試完成基本設計。因此，頁面上應該有幾列應該能夠在x軸上浮動。目前它們的寬度是靜態的，它們的高度將是瀏覽器窗口的100％。這裏是一個JSFiddle：http://jsfiddle.net/qAUXQ/如何將動態高度的div上的可滾動內容居中？

在這些列中，應該有垂直居中的內容。但是，如果一列的內容高於瀏覽器窗口，應該會出現一個滾動條。問題是，由於高度是動態的，我能想到的唯一方法（並在Google上找到）是使用display: table方法。

問題是div上的滾動條不起作用。所以當瀏覽器窗口太小時，用戶根本看不到它。它不可滾動！

下面是如果你不希望使用的jsfiddle代碼：有一點的時間來理解正是你問

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 

} 

body { 
    background: #f4f1ed; 
} 

.bar { 
    height: 100%; 
    border-style: solid; 
    width: 360px; 
    display: table; 
    border-width: 0 1px; 
    border-color: #ddd; 
    position: absolute; 
    transition: left 500ms; 
    -moz-transition: left 500ms; 
    -webkit-transition: left 500ms; 
    -o-transition: left 500ms; 
    z-index: 10; 
    background: #f2f2f2; 
} 

.bar div.middle { 
    display: table-cell; 
    vertical-align: middle; 
} 

.bar div.contents { 
    padding-left: 60px; 
    overflow-y: scroll; 
    overflow-x: hidden; 
}

來源

2013-01-22 Student of Hogwarts

我終於明白了。這是一項非常簡單的任務，我只是沒有看到它。就像你從來沒有找到你想要的東西，如果它在你的鼻子前面... –

：

<div class="bar"> 
    <div class="middle"> 
     <div class="contents"> 
      <p>Lorem Ipsum</p> 
      <p>Lorem Ipsum</p> 
      <p>Lorem Ipsum</p> 
      <p>Lorem Ipsum</p> 
      <p>Lorem Ipsum</p> 
      <p>Lorem Ipsum</p> 
     </div> 
    </div> 
</div>

CSS。但是，從我收集的東西，你可能要嘗試添加的高度，並使用

overflow:scroll;

EDIT（更新）

只好將它洗了一下週圍，但這個工程：

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
body { 
    background: #f4f1ed; 
} 
.bar { 
    height: 100%; 
    border-style: solid; 
    width: 360px; 
    border-width: 0 1px; 
    border-color: #ddd; 
    position: absolute; 
    transition: left 500ms; 
    -moz-transition: left 500ms; 
    -webkit-transition: left 500ms; 
    -o-transition: left 500ms; 
    z-index: 10; 
    background: #f2f2f2; 
    overflow:scroll; 
} 
.bar div.middle { 
    height: 100%; 
    display: table; 
} 
.bar div.contents { 
    padding-left: 60px; 
    display: table-cell; 
    vertical-align:middle; 
}

可以檢查出http://jsfiddle.net/qAUXQ/7/的完整解決方案（更新）

Reupdated爲中心。想要按照你要去的方向使用表格和表格。檢查它與小列表，它中心，更長的列表，它滾動。希望這可以幫助。

來源

2013-01-22 15:31:53 Taraes

嗯，這正是我所做的。但是從JSFiddle中可以看到，滾動條不會被激活。它們只是變灰了，這是因爲div是'display：table-cell'。但我無法找出任何其他方式來居中動態高度的div .. –

如何定義高度？如果我用設定的高度鎖定小提琴，滾動條就可以正常工作。 – Taraes

哪個瀏覽器？高度由列（div）中的文本/圖片數量定義。 –

我不知道你正在試圖做什麼，當我沒有誤會你想要你的.bar div是一個滾動條和你的.middle和.contents在垂直中心100％的高度。所以只是嘗試改變以下幾點：

.bar {display:block; overflow: auto; height: 100%; min-height:100%; width:100%; }

添加一個額外的div標籤的顯示：表：

div.table{ 
height:100%; 
border-style: solid; 
width: 360px; 
display: table; 
border-width: 0 1px; 
border-color: #ddd; 
position: absolute; 
transition: left 500ms; 
-moz-transition: left 500ms; 
-webkit-transition: left 500ms; 
-o-transition: left 500ms; 
z-index: 10; 
background: #f2f2f2;}

你只需要使用兩個表元素，其餘爲垂直和水平對齊。那裏沒有溢出。現在你有3個div用於設置表格和一個div來控制溢出和滾動條。

是什麼？ http://jsfiddle.net/WAjdp/

來源

2013-01-22 18:39:42 Chris

好的，所以我終於明白自己了。這很容易，但我只是「盲目」......

這裏是小提琴：http://jsfiddle.net/qAUXQ/6/

只要做到這一點是這樣的：

div bar 
    div container 
     div contents 
      contents

然後你做一些CSS：

.bar { 
    overflow-x: hidden; 
} 

.container { 
    display: table; 
} 

.contents { 
    display: table-cell; 
    vertical-align: middle; 
}

我沒有第一次是的.bar設置display: table。所以滾動條沒有工作。現在滾動條被設置在.bar上。

來源

2013-01-22 18:50:13

如何將動態高度的div上的可滾動內容居中？

回答

相關問題