long webpage with height more than screen height [closed]

Picture [1] is what I want to achieve.

Picture [2] is what I currently have.

Picture [3] is a real-world example of a long webpage.

Picture 1

Picture 2

Picture 3

I googled and read several posts that seemed related, but still couldn’t find a solution.

I tried things below as some posts suggested

// index.css

html, body{
  height: 100%;
}

// index.css

html{
  height: 100%;
}

body{
  min-height: 100%;
// height: fit-content; doesn't seem to work either
}

I also tried

// index.css

body{
  display: flex;
  flex-direction: column;
}

I know I can simply do

// index.css

body{
   height: 200%;
   // or height: 9999px;
   // or height: 200vh;
}

But I don’t think it’s a good solution for me because it needs to be rewritten every time I append new things.