根据网站高度（不是视口高度）在 CSS 中设置 div 高度

Question

I am using Wordpress and I have set up a website using a website builder that has multiple divs that expand the full width of the screen. I want to draw a vertical line across the left side that starts 300px from the top and 100px from the left and extends to the bottom of the web page (not the viewport height).

It should look like this

The solution I found so far is to add a div to the very top and with css draw the line from the starting position, while increasing the size of the div to match the height of the page, like this

The challenge I'm facing now is how do I extend the div box to have the height of the page? It seems it's not possible with CSS alone, but I also haven't been getting far with Javascript either. The ideas I've had are to return the scrollHeight and pass into into a style tag in the HTML div tag, but I haven't been able to get it working either.

Below my CSS/HTML code:

CSS/HTML

 static { float: left; overflow: hidden; position: absolute; flex-direction: column; left: 100px; top: 300px; min-height: 100vh; height: auto; border-left: 1px solid green; }

 <div class="static" id="line"></div>

Thanks

Answer 1

I hope it will work for you as well.

 window.onload = function (){ var line = document.getElementById('line'); const page_height = document.body.clientHeight; line.style.height = (page_height - 300)+'px'; }

 .static { overflow: hidden; position: absolute; flex-direction: column; left: 100px; top: 300px; border-left: 3px solid red; }