Olá Letícia!
A diferença entre utilizar "height: 100vh" e "height: 100%" no corpo do HTML é que o primeiro irá definir a altura do elemento como 100% da altura da tela, enquanto o segundo irá definir a altura do elemento como 100% da altura do elemento pai.
Em relação a quando utilizar cada um, isso vai depender do layout que você está criando. Se você deseja que o elemento ocupe toda a tela, independentemente do tamanho do conteúdo, o "height: 100vh" é a melhor opção. Porém, se você quer que o elemento tenha a mesma altura do elemento pai, o "height: 100%" é a melhor escolha, ou seja, eles tem suas diferenças e nenhum substitui o outro.
É importante lembrar que, ao utilizar "height: 100vh", você pode acabar tendo problemas em dispositivos móveis, onde a altura da tela pode ser menor do que a altura do elemento. Nesses casos, o conteúdo pode ficar cortado ou pode ser necessário rolar a página para visualizá-lo por completo.
Em relação à extensão do conteúdo, o uso de "height: 100vh" ou "height: 100%" não deve afetar a extensão do conteúdo, mas sim a altura do elemento em que o conteúdo está inserido. Se o conteúdo for maior do que a altura do elemento, será necessário rolar a página para visualizá-lo por completo.
Espero ter ajudado, qualquer dúvida, me coloco à disposição! Bons estudos!
Sucesso
Um grande abraço e até mais!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!