为什么 div 比它的内容大？

Question

我有一个玩 Quantik 的小程序，并且有一个比其内容大的div#gameTable 。 我为此使用CSS 网格结构，我想在一页中显示整个游戏（没有滚动条）。 我怎样才能解决这个问题并使div#gameTable适合它的内容？

相关代码片段：

索引.html：

<div id="gameArea">
    <div id="gameTable"></div>
    <div id="infos">
        <div id="firstPlayer">
            <img id="pawnBlack" src="images/pawnBlack.png" alt="pawnBlack">
            <p id="firstPlayersID">1. játékos</p>
        </div>
            
        <p id="informativeText">vs</p>
            
        <div id="secondPlayer">
            <img id="pawnWhite" src="images/pawnWhite.png" alt="pawnWhite">
            <p id="secondPlayersID">2. játékos</p>
        </div>
    </div>
    <div id="firstPlayersFigures">
        <div id="firstPlayersSign">1. játékos</div>
        <div id="firstPlayersCurrentFigures"></div>
    </div>
    <div id="secondPlayersFigures">
        <div id="secondPlayersSign">2. játékos</div>
        <div id="secondPlayersCurrentFigures"></div>
    </div>
</div>

样式.css：

#gameTable { grid-area: gameTable; }
#infos { grid-area: infos; }
#firstPlayersFigures { grid-area: firstPlayersFigures; }
#secondPlayersFigures { grid-area: secondPlayersFigures; }
#gameArea {
    visibility: hidden;
    font-size: 1.1em;
    display: grid;
    grid-template-columns: 1fr 6fr 1fr;
    grid-template-rows: 1fr 4fr;
    grid-template-areas: 
    'firstPlayersFigures infos secondPlayersFigures'
    'firstPlayersFigures gameTable secondPlayersFigures';
}

#gameTable {
    margin: 0 0 0 430px;
    border-collapse: collapse;
}

#gameTable td, td > button {
    background-color: transparent;
    border: transparent;
    width: 130px;
    height: 130px;
}

#gameTable td, td > img {
    width: 100px;
    height: 100px;
}

#gameTable td {
    border: solid white 2px;
    border-radius: 10px;
    text-align: center;
    font-family: Consolas, monospace;
    font-weight: bold;
}

我正在用 js 生成表格。

渲染.js：

export function renderTable(board) {
    return `<table>${board.map(renderRow).join("")}</table>`;
}

function renderRow(row) {
    return `<tr>${row.map(renderField).join("")}</tr>`;
}

function renderField(field) {
    let fieldInnerHTML = ``;

    if (field.canStepOn) {
        if (field.item === "") {
            fieldInnerHTML = `<td class="canStepOn"><button></button></td>`;
        } else {
            fieldInnerHTML = `<td class="canStepOn"><img src="images/${field.item}${field.itemColor}.png"></td>`;
        }
    } else {
        if (field.item === "") {
            fieldInnerHTML = `<td></td>`;
        } else {
            fieldInnerHTML = `<td><img src="images/${field.item}${field.itemColor}.png"></td>`;
        }
    }

    return fieldInnerHTML;
}

Answer 1

在父 div 上试试这个：

#gameTable {
margin: 0 0 0 430px;
border-collapse: collapse;
height: max-content;}

您可能需要做一些试验，但这应该调整父 div 使其具有与其内部内容相同的高度。

Answer 2

CSS margin或padding可以改变 div 的高度。