gpt4 book ai didi

具有 2 行的 HTML 表格。 1 固定高度,1 100%。比 window 大。为什么?

转载 作者:行者123 更新时间:2023-11-28 19:07:52 25 4
gpt4 key购买 nike

<!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>


<style type="text/css">


html, body, form, table, tbody, tr {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
border-style: none;
}

tr#MainTitle
{
height: 70px;
}

div#test {
height: 100%;
background-color: blue;
}

/* If I remove the 100% here then the scrollbars are removed and the cell still fills the window but the div no longer fills the cell. */

td.MainMenu {
background-color: red;
height: 100%;
}
</style>
</head>
<body>
<form name="form1" method="post" action="#" id="form1">
<table id="Main">
<tbody>

<tr id="MainTitle">
<td>Title</td>
</tr>

<tr id="MainMenuRow">
<td valign="top" class='MainMenu' id='MainMenu'><div id="test">Test</div></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

(edit) 我试图简化这个问题。我有一张 table 。我希望顶部标题行的大小固定,下一个内容行填充剩余的屏幕。

如果内容单元格为 height:100% 则页面大于窗口(按标题行的大小),但如果我将其切换为自动,则单元格的大小适合窗口,但包含的 div 未填充单元格。

这是怎么回事?

最佳答案

tr 不接受高度属性。您需要在 td 或 th 元素上设置它。这段代码应该可以完成工作。

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
html, body, form, table {height: 100%;width: 100%;margin: 0px;padding: 0px;border:0;}
tr th {height:70px;}
tr td {background-color: blue;position:relative;vertical-align:top;}
.text {position:relative;height:100%;width:100%;background:yellow;}
</style>
</head>
<body>
<form name="form1" method="post" action="#" id="form1">
<table id="Main" cellpadding="0" cellspacing="0">
<tr>
<th>Title</th>
</tr>
<tr>
<td><div class="text">Test</div></td>
</tr>
</table>
</form>
</body>
</html>

关于具有 2 行的 HTML 表格。 1 固定高度,1 100%。比 window 大。为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2371505/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com