表格单元格中的可滚动div

时间:2013-07-29 09:12:41

标签: css html5 html tablelayout

我正在尝试创建一个表格布局,顶部有一个标题,左边是一些内容,右边是可滚动部分。我在Safari和Chrome中所做的工作,但由于某些原因它在Firefox中不起作用,右侧单元格中的可滚动div不会滚动,而是将表格推得更大......

我听说过这些天你不应该使用表格,而是使用所有的div,但是如何在没有表格的情况下使用这样的标题区域进行2列布局?

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

这是我的一些CSS:

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

编辑:确定我发现了问题,我没有在height: 100%tr元素上设置tbody。现在这一切都正确滚动,但内容与标题的大小相关,例如,如果您将正确的内容滚动到底部,则可以看到它已被切断...

3 个答案:

答案 0 :(得分:1)

我创建了一个小提琴请检查它有点不同但它在所有浏览器中工作

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

答案 1 :(得分:0)

tr td.rightScroll div首先更改溢出-y:滚动;溢出-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;
}

答案 2 :(得分: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;
}