如何确保 html/body/root 高度增长以包含动态生成的内容？

Question

我有一些从数据库动态生成的内容（想想产品的网上商店），但我似乎无法获得根高度来包含所有内容。本质上，根从加载开始一直生长到可见屏幕的底部。就像，当我打开检查器时它会停止，当我滚动到下面时我可以看到它结束的地方。

但是，实际加载的内容延伸得更远，大约4720px...据我所知，我猜测这是因为内容是在root加载之后加载的？不太确定。无论如何，这是我为 root/body/html 样式设置的：

body {
  margin: 0;
  display: flex;
  place-items: center;
  width: 100%;

  
}

html{
  width: 100vw;
  
}

html, body, #root{
  height: 100vh;
  margin: 0;
  padding: 0;
}

这是模板化产品容器的样式（在生成内容之前）：

fsWrap
    // display: flex
    width: 100%


.fsCont
    display: flex
    height: 100%
    width: 100%
    flex-direction: column

.mnPL
    display: flex
    height: 100%
    width: 100%
    
    
.mnSub
    width: 100%
    display: flex
    height: 100%
    flex-direction: row

.sbWrap
    background-color: $theme-color-white
    display: flex
    width: 12rem
    border-right: 1px
    border-right-color: rgb(212, 212, 212)
    border-style: solid
    @media (max-width: 600px)
        display: none

.sbCont
    display: flex
    flex-direction: column
    padding: 2rem 1rem
    width: 100%

Answer 1

你有

height: 100vh

。

我想也许你想要的是

min-height: 100vh

。

元素的高度不受限制，将始终“增长”以包围其内容的高度。您已通过指定

height: 100vh

来约束它。

通常，在粘性页脚和类似的情况下，开发人员希望他们的身体至少与整个屏幕一样高。所以也许您想要

min-height: 100vh

。