3

我正在尝试创建一个表格布局，顶部有一个标题，左侧有一些内容，右侧有一个可滚动部分。我所做的工作在 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%andtr元素tbody。现在一切都可以正常滚动了，但是内容会因标题的大小而偏离，例如，如果您将正确的内容滚动到底部，您会看到它被截断了......

4

3 回答 3

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;
}
于 2013-07-29T09:33:07.727 回答
0

对于表tr td.rightScroll div首先更改溢出-y：滚动；溢出-y：自动；

table tr td.rightScroll div {
    width: 100%;
    height: 80%; //height should be fixed say 80% / 200px to enable content scrolling
    overflow-y:auto;
}
于 2013-07-29T09:23:12.863 回答
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;
}
于 2013-07-29T09:33:40.540 回答