Question

我正在尝试完成“The Odin Project”的作业。目标是创建一个类似蚀刻的草图网页。我已经走得很远了，但是我一直试图动态调整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 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/

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>

如何动态调整div的网格以填充（但不超过）容器div的尺寸？

2 个答案: