表格单元格中的可滚动div [英] Scrollable div in table cell

问题描述

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

我听说过这些日子你不应该使用表，而是使用所有的div，但是你怎么做一个2列的布局与这样的头像区没有表？ / p>

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

以下是我的一些CSS：

  html ，body {
 height：100％; 
} 
 
表{
 position：absolute; 
 top：0px; 
 left：0px; 
 width：100％; 
 height：100％; 
} 
 
表tr td.rightScroll {
 width：200px; 
 height：100％; 
} 
 
表tr td.rightScroll div {
 width：100％; 
 height：100％; 
 overflow-y：scroll; 
} 
  

EDIT：未在 tr 和 tbody height：100％ c>元素。现在它正常滚动，但内容是关闭的标题的大小，例如，如果你滚动正确的内容到底部，你可以看到它被切断...

解决方案

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

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

  body，td，div，p，a {
 font-family：Verdana，Arial; 
} 
 
 html，body {
 height：100％; 
 overflow：hidden; 
} 
 
表{
 position：absolute; 
 top：0px; 
 left：0px; 
 width：100％; 
 height：100％; 
 border-collapse：collapse; 
} 
 
表tr td.header {
 background-color：＃222; 
 color：#BBB; 
 padding：5px; 
 text-align：center; 
} 
 
表tr td.content {
 text-align：center; 
 vertical-align：middle; 
 background-color：＃333; 
 color：#AAA; 
 position：relative; 
} 
 
表tr td.rightScroll {
 width：200px; 
 height：100％; 
 
 border-left：1px solid black; 
 background-color：＃999; 
 display：table-cell; 
 
 
} 
 
表tr td.rightScroll div {
 width：200px; 
 height：calc（100％ -  28px）; 
 position：absolute; 
 top：28px; 
 
 right：0; 
 overflow-y：scroll; 
} 
  

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...

解决方案

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

这篇关于表格单元格中的可滚动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！