javascript - 如何动态调整 div 网格的大小以填充(但不超过)容器 div 的尺寸？

Question

我正在尝试完成“奥丁计划”的作业。目标是创建一个类似 eclipse 刻素描的网页。我已经走得很远了，但我一直在尝试动态调整 div 网格的大小。

我有一个设置为 500x500 像素的容器 div。然而，我没有尝试过让容器 div 适本地填充空间。我觉得我在 CSS 中遗漏了一些微不足道的东西，但无法弄清楚是什么。

CSS:

 .outer {
    width: 500px;
    height: 500px;
    position: absolute;
}

#gridtable {
    width: 100%;
    height: 100%;
}

.outtable {
    background: #CCC;
    min-height: 1%;
    height: auto;
    min-width: 1%;
    width: auto;
    position: absolute;
    display: inline-block;
}

.newcolor {
    background: blue;
    min-height: 1%;
    height: auto;
    min-width: 1%;
    width: auto;
    position: absolute;
    display: inline-block;
}

JSFiddle here .

Answer 1

您需要设置您的表格元素以填充可用宽度(即 100%)，此时它们默认为所需的最小空间(这是表格默认值)

.outer {
    width: 500px;
    height: 500px;
   position: relative;
    overflow: hidden;
}

#gridtable {
    width: 100%;
    height: 100%;
}

table, tbody, tr, td{
    width: 100%;  

}
.intable{display: flex; }
.intable td{}
.outtable{
    background: #CCC;
    min-height: 1%;
    height: auto;
    min-width: 100%;
    width: auto;
    position: absolute;
    display: inline-block;
}

.newcolor {
    background: blue;
    min-height: 1%;
    height: auto;
    min-width: 100%;
    width: auto;
    position: absolute;
    display: inline-block;
}

jsfiddle:http://jsfiddle.net/o4poarey/6/