表格单元格内可滚动的div

Question

表格单元格内可滚动的div

csshtmltablelayout

3

我正在尝试创建一个带有顶部标题、左侧内容和可滚动区域的表格布局。我的代码在Safari和Chrome中运行良好，但是在Firefox中却不能正常工作，右侧单元格中的可滚动div不会滚动，而是将表格变得更大。

我听说现在不应该使用表格，而应该使用所有的div，但是如果没有表格，如何创建一个带有标题区域的2列布局呢？

这是一些CSS代码：

http://jsfiddle.net/zS8vy/3/

html, body {
    height: 100%;
}

table {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

table tr td.rightScroll {
    width: 200px;
    height: 100%;
}

table tr td.rightScroll div {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}

编辑：好的，我找到问题了，我没有在tr和tbody元素上设置height: 100%。现在所有内容都可以正常滚动，但是内容偏移了头部的大小，例如，如果您将右侧内容滚动到底部，就会发现它被截断了...

- jjv360

你在IE浏览器中尝试的代码对我有效。你使用的是哪个版本的IE？ - AnaMaria

抱歉，在IE中似乎无法工作，问题出现在Firefox上... - jjv360

你也可以选择使用div布局而不是表格。 - Mike Phils

3个回答

0

对于表格 tr td.rightScroll div，首先将 overflow-y:scroll; 更改为 overflow-y:auto;

table tr td.rightScroll div {
    width: 100%;
    height: 80%; //height should be fixed say 80% / 200px to enable content scrolling
    overflow-y:auto;
}

- Sunil Kumar

将 overflow-y 改为 auto 只是移除了滚动条，内容仍然会使表格变大... - jjv360

你正在使用height: 100％来设置所有部分，这会使所有内容与表格一起垂直扩展，你是否需要固定或流体布局？ - Sunil Kumar

固定布局，唯一应该滚动的部分是右侧项目列表... - jjv360

这个答案是正确的方向，但高度需要以像素为单位定义，而不是百分比... http://jsfiddle.net/zS8vy/4/ - designtocode

1

问题是我不知道它的高度预先是多少，它需要占据屏幕的100％减去头部单元格的大小... - jjv360

0

table tr td.rightScroll {
    width: 200px;
    height: auto; //change height to Auto
    border-left: 1px solid black;
    background-color: #999;
    padding: 5px;
}

table tr td.rightScroll {
    vertical-align: top;  //Align scrollable div to top inside <td>
}

table tr td.rightScroll div {
    width: 100%;
    height: 300px; //Give fixed height to enable scroll to <DIV>
    overflow-y:auto;
}

- Sunil Kumar

1

嗨，问题是我不知道给div什么大小，它应该是屏幕的100％减去标题的大小... - jjv360

@jjv360 请阅读这篇文章，可能对你理解有所帮助 - 链接 - Sunil Kumar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hushme · Accepted Answer

我创建了一个示例，请检查一下，它略有不同，但在所有浏览器中都可以正常工作。

http://jsfiddle.net/zS8vy/7/

 body, td, div, p, a {
    font-family: Verdana, Arial;
}

html, body {
    height: 100%;
    overflow: hidden;
}

table {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-collapse: collapse;
}

table tr td.header {
    background-color: #222;
    color: #BBB;
    padding: 5px;
    text-align: center;
}

table tr td.content {
    text-align: center;
    vertical-align: middle;
    background-color: #333;
    color: #AAA;
    position:relative;
}

table tr td.rightScroll {
    width: 200px;
    height: 100%;

    border-left: 1px solid black;
    background-color: #999;
   display:table-cell;


}

table tr td.rightScroll div {
 width:200px;
    height:calc(100% - 28px);
position:absolute;
    top:28px;

    right:0;
    overflow-y: scroll;
}