Question

我觉得标题听起来很棘手，我想要达到的目的就是简单地填充父元素的确切剩余高度，这里是我所拥有的，HTML：

Public Sub ndc_no_textbox_pages(1)_Change()
Set SearchRangeNDC = Worksheets("ProductMasterData").Range("F1:F100")
Set FindRowNDC = SearchRangeNDC.Find(ndc_no_textbox.Value, LookIn:=xlValues, lookat:=xlWhole)
If FindRowNDC Is Nothing Then
MsgBox "Please Enter Correct NDC Number or" & vbNewLine & "Select From Drop   Down Menu", vbOKOnly, "Required Field"
Else
NDCRow = FindRowNDC.Row
ndc_no_textbox_pages_label(1).Caption =      Worksheets("ProductMasterData").Range("F" & NDCRow) & vbNewLine & Worksheets("ProductMasterData").Range("N" & NDCRow)
End If
End Sub

CSS：

<div id="container">
    <div id="row1"></div>
    <div id="row2"></div>
</div>

当＃row1达到最小高度并停止缩小时＃row2开始获得额外的高度，如何在不使用javascript的情况下正确计算高度（不是我不能在其中编码，它是＆＃39; s只有我的布局的一半是在这个例子中制作的，javascript会导致很多性能下降。）

Answer 1

您可以尝试使用calc()。

<强> jsFiddle

#row2 {
  max-height: calc(100% - 30px);
  height: 90%;
}

Answer 2

使用flexes的解决方案：

#container{
    display: flex;
    flex-direction: column;
    height:100vh;
    width:100vw;
}

#row1{
    min-height:30px;
    height:10%;
    background:red;
}

#row2{
    flex: 1 0 auto;
    background:green;
}

<div id="container">
    <div id="row1">row1</div>
    <div id="row2">row2</div>
</div>

在兄弟姐妹达到最小高度后填充父母的剩余高度

2 个答案: