CSS布局固定底部，可变高度

是指在网页布局中，将底部元素固定在页面底部，同时允许页面内容的高度随着内容的增加而自动调整。

实现这种布局可以使用CSS的flexbox布局或者grid布局。

使用flexbox布局实现固定底部，可变高度的布局，可以按照以下步骤进行：

1. 创建HTML结构，包含一个容器元素和一个底部元素，例如：<div class="container"> <div class="content">页面内容</div> <div class="footer">底部内容</div> </div>
2. 使用CSS设置容器元素的样式，使其采用flexbox布局，并设置flex-direction为column，使内容垂直排列，例如：.container { display: flex; flex-direction: column; min-height: 100vh; /* 设置容器元素的最小高度为视口高度，保证内容不会溢出 */ }
3. 设置内容元素的flex-grow属性为1，使其占据剩余的空间，例如：.content { flex-grow: 1; }
4. 设置底部元素的样式，例如：.footer { background-color: #f5f5f5; padding: 10px; }

这样，底部元素就会固定在页面底部，而内容元素会根据内容的高度自动调整。

推荐的腾讯云相关产品：腾讯云云服务器（CVM），产品介绍链接地址：https://cloud.tencent.com/product/cvm

请注意，以上答案仅供参考，实际实现方式可能因具体需求和场景而有所不同。