Scrollable div in table cell

问题

I'm trying to create a table layout with a header along the top, some content in the left and a scrollable section on the right. What I've done works in Safari and Chrome, but for some reason it doesn't work in Firefox, the scrollable div in the cell on the right doesn't scroll but instead pushes the table bigger...

I've heard that these days you shouldn't use tables but instead use all divs, but how would you make a 2-column layout with a header area like this without a table?

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

Here's some of my 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;
}

EDIT: OK I found the problem, I hadn't set height: 100% on the tr and tbody elements. Now it all scrolls properly, but the content is off by the size of the header, for example if you scroll the right content to the bottom you can see it's getting cut off...

回答1:

i created a fiddle please check this its a little different but its working in all browser

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

回答2:

For table tr td.rightScroll div First change overflow-y:scroll; to 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;
}

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

来源：https://stackoverflow.com/questions/17920061/scrollable-div-in-table-cell