html页面布局，内容div高度填充所有剩余空间

HTML页面布局是指在网页中对各个元素进行排列和定位，以实现页面的结构和样式。其中，内容div高度填充所有剩余空间是一种常见的布局需求，可以通过以下几种方式实现：

1. 使用CSS Flexbox布局： Flexbox是一种弹性盒子布局模型，可以轻松实现各种复杂的布局需求。要实现内容div高度填充所有剩余空间，可以将页面分为上、中、下三个部分，然后使用Flexbox将中间的内容div设置为自动增长的弹性项目。具体代码如下：<style> .container { display: flex; flex-direction: column; height: 100vh; /* 设置容器高度为视口高度 */ }

.header {

 height: 100px;

 background-color: #ccc;

}

.content {

 flex: 1; /* 设置内容div为自动增长的弹性项目 */

 background-color: #eee;

}

.footer {

 height: 50px;

 background-color: #ccc;

}

</style>

<div class="container">

 <div class="header">Header</div>

 <div class="content">Content</div>

 <div class="footer">Footer</div>

</div>

在上述代码中，通过设置.container为Flex容器，.content的flex属性为1，使其自动填充剩余空间。

1. 使用CSS Grid布局： CSS Grid是一种二维网格布局模型，可以将页面划分为行和列，灵活地控制元素的位置和大小。要实现内容div高度填充所有剩余空间，可以将页面划分为上、中、下三个部分，并使用Grid布局将中间的内容div设置为自动增长的行。具体代码如下：<style> .container { display: grid; grid-template-rows: 100px 1fr 50px; /* 设置行高，其中1fr表示自动增长的行 */ height: 100vh; /* 设置容器高度为视口高度 */ }

.header {

 background-color: #ccc;

}

.content {

 background-color: #eee;

}

.footer {

 background-color: #ccc;

}

</style>

<div class="container">

 <div class="header">Header</div>

 <div class="content">Content</div>

 <div class="footer">Footer</div>

</div>

在上述代码中，通过设置.container为Grid容器，使用grid-template-rows属性设置行高，其中1fr表示自动增长的行。

以上两种方式都可以实现内容div高度填充所有剩余空间的布局效果。具体选择哪种方式取决于具体的需求和兼容性要求。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云弹性伸缩（Auto Scaling）：https://cloud.tencent.com/product/as
• 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 腾讯云云数据库 MySQL 版（TencentDB for MySQL）：https://cloud.tencent.com/product/cdb_mysql
• 腾讯云云原生容器服务（Tencent Kubernetes Engine，TKE）：https://cloud.tencent.com/product/tke
• 腾讯云对象存储（Cloud Object Storage，COS）：https://cloud.tencent.com/product/cos
• 腾讯云区块链服务（Tencent Blockchain as a Service，TBaaS）：https://cloud.tencent.com/product/tbaas
• 腾讯云物联网通信（IoT Hub）：https://cloud.tencent.com/product/iothub
• 腾讯云移动推送（TPNS）：https://cloud.tencent.com/product/tpns