如果div比viewport短，则扩展div的高度

如果div比viewport短，则可以通过以下几种方式来扩展div的高度：

1. 使用CSS的min-height属性：可以将div的min-height属性设置为100vh，其中vh是视口高度的单位，表示相对于视口高度的百分比。这样设置后，div的高度将至少占满整个视口的高度。

div {
  min-height: 100vh;
}

1. 使用CSS的flexbox布局：可以将div的父容器设置为display: flex，并且设置flex-direction为column，这样div将会自动填充父容器的剩余空间。

.container {
  display: flex;
  flex-direction: column;
}

div {
  flex-grow: 1;
}

1. 使用JavaScript动态计算高度：可以使用JavaScript来动态计算div的高度，使其至少与视口高度相等。可以通过获取视口高度（window.innerHeight）和div的高度（div.offsetHeight）进行比较，并设置div的高度为较大值。

var div = document.getElementById('myDiv');
var viewportHeight = window.innerHeight;
var divHeight = div.offsetHeight;

if (divHeight < viewportHeight) {
  div.style.height = viewportHeight + 'px';
}

以上是几种常见的方法来扩展div的高度，具体选择哪种方法取决于具体的需求和使用场景。

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

• CSS min-height属性：https://cloud.tencent.com/document/product/249/3070
• CSS flexbox布局：https://cloud.tencent.com/document/product/249/3080
• JavaScript获取视口高度：https://cloud.tencent.com/document/product/249/3133