我正在开发一个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%;
}
答案 0 :(得分：0)
基本上发生的事情是，表格单元格的5％高度对于包含在其中的文本来说太小，所以不会消失它而忽略容器的高度。
要解决此问题，您必须使用媒体查询来重新排列表格 - 尽管我建议不要使用表格，因为它会使这一点变得更容易 - 因此高度的大小不会创建滚动条。
请点击此处查看有关媒体查询的教程：http://www.youtube.com/watch?v=fA1NW-T1QXc
答案 1 :(得分：0)
我认为应该纠正以下几行：
html，body { 白颜色; }
将文本颜色设置为白色是一个坏主意，因为文本和背景都具有相同的颜色，因此无法读取某些文本（如AAAAAAAAAA），也很难轻松解读错误。
为了改进标记，建议您将html和css代码分别放入自己的文件中。这也使代码非常容易理解。此外，您始终可以在Web控制台上查看所有标记错误：ctrl+shif+k在大多数现代浏览器上。