Html css div高度填充到屏幕大小

我有3个div，希望最后一个div的高度可以填充。 我尝试了一些事情，但没有成功

<div class="maincontent">
    <div class="patient_info"></div>
    <div class="patient_buttons"></div>
    <div class="row">
        <div class="col-xl-8" style="padding-right:0;">
            <div class="bg_tooths"></div>
            <div class="treatment_list_bg">
                <div class="treatment_list_banner"></div>
                <div class="treatment_list"></div>
            </div>
        </div> 
    </div>
</div>

CSS代码：

它将适合屏幕大小。但我做不到。也许这很简单，但我是css新手。你能帮我吗？

这个html：

<div class="maincontent">
  <div class="patient_info child"></div>
  <div class="patient_buttons child"></div>
  <div class="row child">
    <div class="col-xl-8" style="padding-right:0;">
        <div class="bg_tooths"></div>
        <div class="treatment_list_bg">
            <div class="treatment_list_banner"></div>
            <div class="treatment_list"></div>
        </div>
    </div> 
  </div>
</div>

---

您可以尝试在css中使用calc和视口大小vh：

height: calc(100vh - 50px - 5rem);

其中100vh表示视口的垂直大小。我们减去其他div的每一个高度，你也应该包括它们的填充物、边距和边框尺寸

---

看一下答案，告诉我们是否可以@kamil kuntcan你能添加css代码吗？我已经添加了但格式图像。你可以看看：让一个html元素达到100%的高度是非常困难的！但是，随着CSS flexbox和网格的引入，这变得非常简单：cf+

height: calc(100vh - 50px - 5rem);