Question

我正在制作一个网络应用程序，目前我正在尝试完成基本设计。所以页面上应该有几列应该可以在x轴上浮动。它们现在是静态宽度，它们的高度将是浏览器窗口的100％。这是一个JSFiddle：http://jsfiddle.net/qAUXQ/

在这些列中，应该有垂直居中的内容。但是，如果一列的内容高于浏览器窗口，则应显示滚动条。问题在于，由于高度是动态的，我能想到的唯一方法（并在Google上找到）就是使用display: table方法。

问题是div上的滚动条不起作用。因此，当浏览器窗口太小时，用户根本看不到它。它不可滚动！

如果您不想使用JSFiddle，则下面是代码：

<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：

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;
}

Answer 1

有一点时间准确理解你在问什么。但是从我收集的内容来看，您可能想尝试添加高度并使用

overflow:scroll;

编辑（更新）

不得不稍微改变一下，但这有效：

    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/以获取完整解决方案（已更新）

重新定位中心。想要在你前进的方向上使用表格和表格单元格。用小列表检查它，它的中心，更长的列表，它滚动。希望这会有所帮助。

Answer 2

好的，所以我终于弄明白了。这很简单，但我只是“盲目”......

这是小提琴：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。

Answer 3

我不确切地知道你要做什么，当我没有误解你想要你的.bar div是100％高度的滚动条和你的.middle和.contents在垂直中心。所以只需尝试更改以下内容：

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

为display：table：

添加一个额外的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/

如何将动态高度div上的可滚动内容居中？

3 个答案: