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 codes

它适合屏幕尺寸 . 但我不能这样做 . 也许这很容易,但我是css的新手 . 你能帮助我吗?

回答(2)

2 years ago

您可以尝试在css中使用“calc”和视口大小(vh):

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

其中100vh代表视口的垂直大小 . 我们减去其他div的每个高度(你应该包括它们的填充,边距和边框Y大小) .

Codepen example

2 years ago

这个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>

然后使用jquery:

$('.child').last().css("height", screen.Height);