為什么 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 的高度。