3

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

3 回答 3

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 上。

于 2013-01-22T18:50:13.753 回答
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/以获得完整的解决方案（更新）

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

于 2013-01-22T15:31:53.040 回答
0

我不确切知道您要做什么，当我没有弄错时，您希望 .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/

于 2013-01-22T18:39:42.190 回答