Updated Demo

Question

我遇到了css布局的问题。

我正在尝试进行布局而不使用javascript来定位元素。

整体布局很好，除非桌面填满剩余空间的问题

=============================
| LT |  TOP            | TR |
=============================
|  Variable height section  |
|                           |
=============================
| Title                     |
|===========================|
| TABLE to fill remaining   |
| with scrollable body and  |
| scrollable table (i.e.    |
| fixed headers)            |
=============================

这是jsfiddle http://jsfiddle.net/44cbf4L5/2/

任何人都可以建议一种方法来使表填充它的父div。

提前感谢。

编辑1

感谢您的评论，虽然100％的高度和宽度不考虑滚动条的宽度，但这个小提琴更接近http://jsfiddle.net/44cbf4L5/11/。

我想问题的下一部分是如何将尺寸设定为100％高度或宽度，包括滚动条宽度的高度？几乎就像滚动条的盒子大小一样？

Answer 1

将表格上的宽度从500px更改为100％

Answer 2

如果我理解正确，可能会这样吗？

table.datatable{
  width:100%;
  height:100%;
}

Answer 3

您的固定宽度为datatable。

更新此css：

table.datatable {
    border-collapse: collapse;
    overflow-x: scroll;
    display: block;
    background:white;
    /* here i want the table to fill the (width - width of scroll bar) */
    /*width:500px;--------------------here it should be removed*/
    /* and height 100% */
    /* height:100%; */
}

样式表填充剩余空间和滚动

编辑1

3 个答案:

Updated Demo