我正在开发一个web应用程序，我希望内容能够填满整个屏幕的高度。
该页面有一个标题，其中包含徽标和帐户信息。这可以是任意高度。我希望contentdiv将页面的其余部分填充到底。
我有一个header div和一个content div。目前，我正在为布局使用一个表，如下所示：
CSS和HTML
#第页{高度：100%；宽度：100%}#td含量{高度：100%；}#内容{溢出：自动；/*或溢出：隐藏*/}<table id=“page”><tr><td id=“tdheader”><div id=“header”></分区></td></tr><tr><td id=“tdcontent”><div id=“content”></分区></td></tr></table>
页面的整个高度已填充，不需要滚动。
对于contentdiv中的任何内容，设置top:0；会把它放在标题下面。有时内容将是一个真实的表格，其高度设置为100%。将标题放在内容内不允许这样做。
有没有一种方法不使用桌子就能达到同样的效果？
更新：
contentdiv中的元素也将高度设置为百分比。因此，div中100%的内容将填充到底部。50%的两个元素也是如此。
更新2:
例如，如果标题占屏幕高度的20%，则在#内容内部指定50%的表将占屏幕空间的40%。到目前为止，把整个东西包在桌子里是唯一有效的方法。
使用CSS网格的另一个解决方案
定义网格
.root {
display: grid;
grid-template-rows: minmax(60px, auto) minmax(0, 100%);
}
第一行（标题）：可以设置最小高度，最大高度取决于内容。第二行（内容）将尝试容纳标题后剩余的可用空间。
这种方法的优点是内容可以独立于页眉滚动，因此页眉始终位于页面顶部
正文，html{边距：0；高度：100%；}.根{显示：栅格；网格模板行：minmax（60px，自动）minmax（0，100%）；高度：100%；}.页眉{背景色：浅蓝色；}按钮{背景色：深色板岩；颜色：白色；填充：10px 50px；边距：10px 30px；边框半径：15px；边框：无；}.内容{背景色：仿古白；溢出：自动；}.块{宽度：计算（100%-20px）；高度：120px；边框：实心海蓝宝石；边距：10px；}<div class=“root”><div class=“header”><button>单击</button><button>单击</button><button>单击</button><button>单击</button><button>单击</button></div><div class=“content”><div class=“block”></div><div class=“block”></div><div class=“block”></div><div class=“block”></div><div class=“block”></div><div class=“block”></div><div class=“block”></div><div class=“block”></div></div><div class=“footer”></div></div>
