你可以使用JavaScript来实现保持视口高度与内容较少相等的效果。以下是一种可能的解决方法：

// 获取视口高度
function getViewportHeight() {
  return window.innerHeight || document.documentElement.clientHeight;
}

// 获取内容高度
function getContentHeight() {
  return Math.max(
    document.body.scrollHeight,
    document.documentElement.scrollHeight,
    document.body.offsetHeight,
    document.documentElement.offsetHeight,
    document.body.clientHeight,
    document.documentElement.clientHeight
  );
}

// 设置视口高度与内容较少相等
function setViewportHeightEqualContent() {
  // 比较视口高度与内容高度
  var viewportHeight = getViewportHeight();
  var contentHeight = getContentHeight();

  // 如果内容较少，则将视口高度设置为内容高度
  if (viewportHeight > contentHeight) {
    document.documentElement.style.height = contentHeight + 'px';
  }
}

// 初始化时设置视口高度与内容较少相等
window.addEventListener('DOMContentLoaded', setViewportHeightEqualContent);

// 在窗口大小改变时重新设置视口高度与内容较少相等
window.addEventListener('resize', setViewportHeightEqualContent);

这段代码首先定义了两个函数 getViewportHeight 和 getContentHeight，分别用于获取视口高度和内容高度。然后定义了 setViewportHeightEqualContent 函数，该函数在页面加载完成时和窗口大小改变时被调用，比较视口高度和内容高度，并将视口高度设置为内容高度，以保持二者相等。最后，通过添加事件监听器，使得 setViewportHeightEqualContent 函数能够在适当的时机被调用。

请注意，这只是一种可能的解决方法，具体实现方式可能会因项目需求和实际情况而有所不同。