Question

我有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的新手。你能帮我吗？

Answer 1

此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);

Answer 2

您可以尝试在CSS中使用“计算”和视口大小（vh）：

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

100vh代表视口的垂直大小。我们减去其他div的每个高度（您还应包括其填充，边距和边框 Y 的大小）。

Codepen example

CSS div高度填充到屏幕尺寸

2 个答案: