如何動態調整div網格的大小以填充（但不超過）容器div的尺寸？

Question

我正在嘗試完成“ The Odin Project”的任務。 目標是創建一個類似sketch-a-sketch的網頁。 我已經走得很遠了，但是我一直在嘗試動態調整div網格的大小。

我有一個容器div，我將其設置為500x500px。 但是我沒有嘗試過讓容器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 在這里 。

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/

Answer 2

使用100％而不是px

<...width="100%" height="100%"...>

代替

<...width="100px" height="100px"...>

還要放在桌子上並將桌子設置為100％

<table style="width:100%">
    <tr>
        <td><...width="100%" height="100%"...></td>
    </tr>
</table>