CSS：固定元素到视口底部的高度

Question

我的页面上有一个 iframe (class:side_bar)，按位置定位：固定在我的文本流中的某个点。它的顶部位置可能在 100-200 像素之间变化。无论其内容如何，​​此元素的高度都应达到视口的底部。
我尝试了 height:100vh 和 height:100%，但是它是整个窗口的高度，并且元素下端被浏览器框架切割。
有什么方法可以获取元素的初始顶部位置，以便我可以使用 heigh:calc(100%-top-position) 或一些简单的选项将该元素拉伸到浏览器的底部（而不是底部页面，因为它可能更长）？
非常感谢（抱歉我的英语不好；））

编辑：我做了一个小例子 - 不完美，但你可以明白我的意思......

.main
    {
    width:100%;
    }
.header
    {
    width:100%;
    text-align:right;
    border-style: solid;
    border-width:1px
    }
.side_bar
    {
    position:fixed;
    width:150px;
    height:100%;
    border-style: solid;
    border-width:1px
    display:inline-block;
    }
.content
    {
    margin-left:150px;
    padding:10px;
    border-style: solid;
    border-width:1px
    }

<div class="main">
    <div class="header">
        <b>Header:</b><br>Height may vary, around 100px-200px, depending on content.
        </div> 
    <iframe class="side_bar" srcdoc="
        <b>Side bar:</b>
        <p>Content may vary, sometimes scrolling, sometimes not</p>
        <p>This iframe should end at the bottom of the viewport, and begin below Header - regardless of content</p>
        <p>By scrolling the page if needed, this iframe must stay in place, therefor position:fixed</p>
        <p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
        <p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
        <p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
        "> </iframe>
    <div class="content">
        <b>Main content:</b>
        <p>Content may vary, sometimes scrolling, sometimes not</p>
        <p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
        <p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
        <p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
        </div>
    </div> 

Answer 1

您的问题非常不清楚，希望这是您想要的

document.querySelector(".content").innerHTML = "<p>content</p>".repeat(60);


const header = document.querySelector(".header");
const sidebar = document.querySelector(".side_bar");
sidebar.style.top = header.offsetHeight + "px";

header.onchange = () => {
  sidebar.style.top = header.offsetHeight + "px";
};
onscroll = () => {
  const diff = header.offsetHeight - window.pageYOffset;
  if (diff < 0) {
    sidebar.style.top = 0;
  } else {
    sidebar.style.top = diff + "px";
  }
};

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main {
  width: 100%;
}

.header {
  width: 100%;
  text-align: right;
  border: 0.3px solid;
}

section {
  display: flex;
}

.side_bar {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 20vw;
  height: 100%;
  border: 0.3px solid;
}

.content {
  margin-left: 20vw;
  width: 80vw;
  padding: 1vh;
  border: 0.3px solid;
}

<div class="main">
  <div class="header">
    <p>header</p>
  </div>

  <section>
    <iframe class="side_bar" srcdoc="
          <b>Side bar:</b>
          <p>Content may vary, sometimes scrolling, sometimes not</p>
          <p>This DIV should end at the bottom of the viewport, and begin below Header - regardless of content</p>
          <p>By scrolling the page if needed, this DIV must stay in place, therefor position:fixed</p>
          <p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
          <p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
          <p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
          ">
        </iframe>

    <div class="content">
      <b>Main content:</b>
      <p>Content may vary, sometimes scrolling, sometimes not</p>
    </div>
  </section>

</div>