将div均匀地扩展到左侧和顶部和底部

，可以使用CSS中的flexbox布局或者grid布局来实现。

1. 使用flexbox布局：

Flexbox是一种用于在容器内创建灵活的和高度可自定义的布局的CSS3属性。以下是实现将div均匀地扩展到左侧、顶部和底部的步骤：

步骤一：HTML结构

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

步骤二：CSS样式

.container {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  height: 100vh;
}

.content {
  flex: 1;
}

通过设置容器的display属性为flex，并使用justify-content属性设置左对齐，使用align-items属性设置高度自动扩展到顶部和底部。在内容的样式中，使用flex: 1将内容平均分配剩余空间。

推荐的腾讯云产品：无

1. 使用grid布局：

Grid布局是一种二维网格布局系统，可以通过网格中的行和列来布局元素。以下是实现将div均匀地扩展到左侧、顶部和底部的步骤：

步骤一：HTML结构

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

步骤二：CSS样式

.container {
  display: grid;
  height: 100vh;
}

.content {
  grid-area: 1 / 1 / 2 / 2;
}

通过设置容器的display属性为grid，并设置容器的高度为视窗的高度，可以创建一个网格布局。在内容的样式中，使用grid-area属性指定内容所占的网格区域。

推荐的腾讯云产品：无