如何在具有动态高度的 div 上居中滚动内容？答案

【问题标题】：How to center scrollable contents on a div with dynamic height?如何在具有动态高度的 div 上居中滚动内容？
【发布时间】：2013-01-05 21:16:02
【问题描述】：

我正在制作一个网络应用程序，目前我正在尝试完成基本设计。所以页面上应该有几列应该能够在 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;
}

【问题讨论】：

我终于想通了。这是一个非常简单的任务，我只是没有看到它。就像你永远找不到你要找的东西，如果它就在你的鼻子前面......

标签： html css web-applications

【解决方案1】：

好的，所以我自己终于想通了。这很容易，但我只是“盲目”......

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

【讨论】：

【解决方案2】：

花点时间准确理解您的要求。但从我收集的信息来看，您可能想尝试添加高度并使用

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

为居中重新更新。想要在你要去的方向上使用表格和表格单元格。用次要列表检查它，它居中，更长的列表，它滚动。希望这会有所帮助。

【讨论】：

嗯，这正是我所做的。但正如您从 JSFiddle 中看到的那样，滚动条没有激活。它们只是灰显，这是因为 div 是 display: table-cell。但我想不出任何其他方法来使具有动态高度的 div 居中..
高度是如何定义的？如果我用设定的高度锁定你的小提琴，滚动条就可以正常工作。
哪个浏览器？高度由列 (div) 内的文本/图片数量定义。
body 上的滚动条工作正常，但 div 上的滚动条根本不起作用。
您将不得不在某些时候为 div.middle 容器定义一个高度。使用“height:100%”只会让容器随着内容的增长而增长。一旦你这样做了，它就可以工作了，见jsfiddle.net/qAUXQ/1。

【解决方案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/

【讨论】：