表不符合容器高度答案

【问题标题】：Table Not Obeying Container Heights表不符合容器高度
【发布时间】：2025-12-07 17:55:02
【问题描述】：

我正在处理一个 HTML 页面，我打算稍后与 PHP 一起使用，但是我遇到了一些关于高度缩放的问题。

我的表格以及表格中的元素没有遵守我在容器中设置的高度限制。

我不希望它超出页面，因为这需要滚动条。有人有什么建议吗？（欢迎其他反馈）

代码 HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="summonerTable.css"/>
<link rel="stylesheet" type="text/css" href="navBar.css"/>
</head>
<body>
<div class="summonerContainer">
    <div class="navbar">
    </div>
    <div id="gameDetails">
    </div>
    <table border="1" id="summonerTeams">
    <tr height="100%">
<!-- Begin Definitions !-->
        <td>

            <table width="100%" id="summonerTeamsDetails" height="100%">
            <tr height="5%">
                <td width="100%" bgcolor="red">
                    <p>
                        Summoner Name
                    </p>
                </td>
            </tr>
            <tr height="10%">
                <td>
                    <table width="100%" height="100%" id="summonerTeamDetailsInterior" bgcolor="red">
                    <tr>
<!--                        <td width="50%" background="ChampionIcon.png" id="summonerImg" alt="Hello">-->
                        <td width="25%" bgcolor="aqua">
                            <img src="ChampionIcon.png" id="summonerImg2" alt="Hello"/>
                        </td>
                        <td width="12%">
                            <table height="100%" width="100%" id="summonerTeamDetailsInterior" bgcolor="aqua">
                            <tr>
<!--                                <td background="summonerSpell.png" id="summonerImg">-->
                                <td style="vertical-align:bottom;">
                                    <img src="summonerSpell.png" id="summonerImg" alt="Hello"/>
                                </td>
                            </tr>
                            <tr>
<!--                                <td background="summonerSpell.png" id="summonerImg"> -->
                                <td style="vertical-align:top;"> 
                                    <img src="summonerSpell.png" id="summonerImg" alt="Hello"/>
                                </td>
                            </tor>
                            </table>
                        </td>
                        <td width="75%">
                            <table height="100%" width="100%" id="summonerTeamDetailsInterior" bgcolor="red">
                            <tr>
                                <td bgcolor="black">
                                    <p>
                                        tryndamere
                                    </p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p>
                                        K/D/A: 1000/1000/1000
                                    </p>
                                </td>
                            </tr>
                            </table>
                        </td>
                    </tr>
                    </table>
                </td>
            </tr>
            <tr height="10%">
                <td width="100%" bgcolor="red">
                    <p>
                        Champion Games
                    </p>
                </td>
            </tr>
            <tr height="5%">
                <td width="100%" bgcolor="red">
                    <p>
                        KDR
                    </p>

                </td>
            </tr>
            <tr height="10%">
                <td width="100%" bgcolor="red">
                    <p>
                        Ranking
                    </p>
                </td>
            </tr>
            <tr height="5%">
                <td width="100%" bgcolor="red">
                    <p>
                        Series
                    </p>
                </td>
            </tr>
            <tr height="10%">
                <td width="100%" bgcolor="red">
                    <p>
                        Runes
                    </p>
                </td>
            </tr>
            <tr height="10%">
                <td width="100%" bgcolor="red">
                    <p>
                        Masteries
                    </p>
                </td>
            </tr>
            <tr height="10%">
                <td width="100%" bgcolor="red">
                    <p>
                        Ranked Wins
                    </p>
                </td>
            </tr>
            <tr height="5%">
                <td width="100%" bgcolor="red">
                    <p>
                        Normal Wins
                    </p>
                </td>
            </tr>
            <tr height="10%">
                <td width="100%" bgcolor="red">
                    <p>
                        Show Champion Counters
                    </p>
                </td>
            </tr>
            </table>
        </td>
<!-- End Definitions !-->
        <td>
            <p>
                AAAAAAAAAAAAAAAA
            </p>
        </td>
        <td>
            <p>
                AAAAAAAAAAAAAAAA
            </p>
        </td>
        <td>
            <p>
                AAAAAAAAAAAAAAAA
            </p>
        </td>
        <td>
            <p>
                AAAAAAAAAAAAAAAA
            </p>
        </td>
    </tr>
    </table>
    <div id="summonerMiddleBar">
    </div>
    <table border="1" id="summonerTeams">
<!-- Summoner Details Table (2) !-->
    <tr height="100%">
<!-- Begin Definitions !-->
        <td>
            <table width="100%" id="summonerTeamsDetails" height="100%">
            <tr height="5%">
                <td width="100%" bgcolor="red">
                    <p>
                        Summoner Name
                    </p>
                </td>
            </tr>
            <tr height="20%">
                <td>
                    <table width="100%" height="100%" id="summonerTeamDetailsInterior" bgcolor="red">
                    <tr>
<!--                        <td width="50%" background="ChampionIcon.png" id="summonerImg" alt="Hello">-->
                        <td width="25%" bgcolor="aqua">
                            <img src="ChampionIcon.png" id="summonerImg2" alt="Hello"/>
                        </td>
                        <td width="12%">
                            <table height="100%" width="100%" id="summonerTeamDetailsInterior" bgcolor="aqua">
                            <tr>
<!--                                <td background="summonerSpell.png" id="summonerImg">-->
                                <td style="vertical-align:bottom;">
                                    <img src="summonerSpell.png" id="summonerImg" alt="Hello"/>
                                </td>
                            </tr>
                            <tr>
<!--                                <td background="summonerSpell.png" id="summonerImg"> -->
                                <td style="vertical-align:top;"> 
                                    <img src="summonerSpell.png" id="summonerImg" alt="Hello"/>
                                </td>
                            </tr>
                            </table>
                        </td>
                        <td width="75%">
                            <table height="100%" width="100%" id="summonerTeamDetailsInterior" bgcolor="red">
                            <tr>
                                <td bgcolor="black">
                                    <p>
                                        tryndamere
                                    </p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p>
                                        K/D/A: 1000/1000/1000
                                    </p>
                                </td>
                            </tr>
                            </table>
                        </td>
                    </tr>
                    </table>
                </td>
            </tr>
            <tr height="10%">
                <td width="100%" bgcolor="red">
                    <p>
                        Champion Games
                    </p>
                </td>
            </tr>
            <tr height="5%">
                <td width="100%" bgcolor="red">
                    <p>
                        KDR
                    </p>

                </td>
            </tr>
            <tr height="10%">
                <td width="100%" bgcolor="red">
                    <p>
                        Ranking
                    </p>
                </td>
            </tr>
            <tr height="5%">
                <td width="100%" bgcolor="red">
                    <p>
                        Series
                    </p>
                </td>
            </tr>
            <tr height="10%">
                <td width="100%" bgcolor="red">
                    <p>
                        Runes
                    </p>
                </td>
            </tr>
            <tr height="10%">
                <td width="100%" bgcolor="red">
                    <p>
                        Masteries
                    </p>
                </td>
            </tr>
            <tr height="10%">
                <td width="100%" bgcolor="red">
                    <p>
                        Ranked Wins
                    </p>
                </td>
            </tr>
            <tr height="5%">
                <td width="100%" bgcolor="red">
                    <p>
                        Normal Wins
                    </p>
                </td>
            </tr>
            <tr height="10%">
                <td width="100%" bgcolor="red">
                    <p>
                        Show Champion Counters
                    </p>
                </td>
            </tr>
            </table>
        </td>
<!-- End Definitions !-->
        <td>

            <p>
                AAAAAAAAAAAAAAAA
            </p>
        </td>
        <td>
            <p>
                AAAAAAAAAAAAAAAA
            </p>
        </td>
        <td>
            <p>
                AAAAAAAAAAAAAAAA
            </p>
        </td>
        <td>
            <p>
                AAAAAAAAAAAAAAAA
            </p>
        </td>
    </tr>
    </table>
    <div class="footer">
    </div>
</div>
</body>
</html>

CSS 代码：

@charset "utf-8";
/* CSS Document */
html, body
{
    height:100%;
    width:100%;
    font:"Courier New", Courier, monospace;
    color:white;
}

.summonerContainer
{
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    resize:none;    
}
#summonerTeams
{
    width:100%;
    margin:0;
    padding:0;
    table-layout:fixed;
    padding:0;
    margin:0;
    border-collapse:collapse;
    height:38%;
}
#summonerTeamsDetails
{
    padding:0;
    margin:0;
    border-spacing:0;
}
#summonerTeamDetailsInterior
{
    padding:0;
    margin:0;
    border-spacing:0;
    border-collapse:collapse;

}
#summonerMiddleBar
{
    background-color:#000;
    color:white;
    height:5%;
    width:100%;
}
#gameDetails
{
    background-color:aqua;
    color:white;
    height:5%;
    width:100%;
}
p
{
    font-size:1.5vw;
    margin:0;
    padding:0;
    text-align:center;
}
body
{
    padding:0;
    margin:0;
}
#summonerImg
{
    max-width:100%;
    width:100%;
    background-size:cover;
    /*display:block;*/
}
#summonerImg2
{
    max-width:100%;
    width:100%;
    background-size:cover;
    /*display:block;*/
}
table
{
}

其他 CSS 代码：

@charset "utf-8";
/* CSS Document */
.navbar
{
    background-color:#000;
    color:white;
    height:10%;
    width:100%;
}
.footer
{
    background-color:#000;
    color:white;
    height:4%;
    width:100%;
}

【问题讨论】：

标签： html css height containers percentage

【解决方案1】：

基本上发生的情况是，表格单元格的 5% 高度对于包含在其中的文本来说太小了，因此它不会消失，而是忽略容器的高度。

要解决此问题，您必须使用媒体查询来重新排列表格 - 尽管我建议不要使用表格，因为它会使这更容易 - 以便高度的大小不会创建滚动条。

有关媒体查询的教程请参见此处：http://www.youtube.com/watch?v=fA1NW-T1QXc

【讨论】：

我尝试过使用单独的 DIVS 来创建不同的部分，但是效果不佳。您是否有任何指示我应该从哪里开始设置 CSS 的媒体查询？
@JasonLy 基本上我会推荐使用一个 css 表库，它可以为你完成我上面所说的一切。另一件事是为什么你不想滚动
好的，我明白了。至于为什么我不想要滚动功能，那是因为该网站旨在提供简短的信息而无需滚动。

【解决方案2】：

我认为以下几行应该更正：

html，正文 { 白颜色; }

将文本颜色设置为白色是个坏主意，因为文本和背景将具有相同的颜色，导致无法阅读某些文本（如 AAAAAAAAAA），并且您也难以轻松破译错误。

为了改进标记，始终建议您将 html 和 css 代码分离到它们自己的文件中。这也使得代码非常容易理解。此外，在大多数现代浏览器上，您始终可以在 Web 控制台上查看所有标记错误：ctrl+shif+k。

【讨论】：