Question

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

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

这是我的一些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。现在这一切都正确滚动，但内容与标题的大小相关，例如，如果您将正确的内容滚动到底部，则可以看到它已被切断...

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

Answer 2

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

Answer 3

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

表格单元格中的可滚动div

3 个答案: