浮动面板占父级的百分比，父级高度为正文的百分比

Question

我有以下CSS设置：

我的模态是身体的百分比：

p-dialog.inViewer .ui-dialog {
    width: 95%;
    height: 95%;
    overflow: hidden !important;
    font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.42857143;
}

在模态中有一个浮动div，其高度根据内容而变化。内容是可滚动的，所以我试图设置浮动div的高度，因此它总是包含在模态中。

到目前为止，我为浮动div提供了以下CSS：

p-dialog.inViewer p-tree.parts .ui-widget-content {
    border-style: none;
    background: rgba(255, 255, 255, 0)!important;
    max-height: 44vh;
    width: 100%;
    overflow: scroll;
}

但这仅适用于大屏幕。我理解问题是我根据高度来定义最大高度，高度表示为百分比。你知道我怎样才能达到理想的布局？我需要让模态居中在屏幕和95％的窗户高度和宽度。

感谢你的帮助，迪诺。

Answer 1

你可以这样做：

body {
  margin: 0px;
  padding: 0px;
}
.modal {
    width: calc(90vw - 80px);
    height: calc(90vh - 80px);
    overflow: hidden !important;
    font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.42857143;
    background-color: red;
    padding: 40px;
    margin: 0 auto;
    margin-top: 5vh;
}
.floating {
    padding: 20px;
    border-style: none;
    width: calc(100% - 40px);
    overflow: hidden;
    background-color: blue;
    color: white;
    min-height: calc(90vh - 120px);
    max-height: calc(90vh - 120px);
    overflow-y: scroll;
}
p {
  margin: 0px;
  margin-bottom: 20px;
}

<div class="modal">
  <div class="floating">
    <p>Hoc inmaturo interitu ipse quoque sui pertaesus excessit e vita aetatis nono anno atque vicensimo cum quadriennio imperasset. natus apud Tuscos in Massa Veternensi, patre Constantio Constantini fratre imperatoris, matreque Galla sorore Rufini et Cerealis, quos trabeae consulares nobilitarunt et praefecturae.</p>
    <p>Verum ad istam omnem orationem brevis est defensio. Nam quoad aetas M. Caeli dare potuit isti suspicioni locum, fuit primum ipsius pudore, deinde etiam patris diligentia disciplinaque munita. Qui ut huic virilem togam deditšnihil dicam hoc loco de me; tantum sit, quantum vos existimatis; hoc dicam, hunc a patre continuo ad me esse deductum; nemo hunc M. Caelium in illo aetatis flore vidit nisi aut cum patre aut mecum aut in M. Crassi castissima domo, cum artibus honestissimis erudiretur.</p>
    <p>Novo denique perniciosoque exemplo idem Gallus ausus est inire flagitium grave, quod Romae cum ultimo dedecore temptasse aliquando dicitur Gallienus, et adhibitis paucis clam ferro succinctis vesperi per tabernas palabatur et conpita quaeritando Graeco sermone, cuius erat inpendio gnarus, quid de Caesare quisque sentiret. et haec confidenter agebat in urbe ubi pernoctantium luminum claritudo dierum solet imitari fulgorem. postremo agnitus saepe iamque, si prodisset, conspicuum se fore contemplans, non nisi luce palam egrediens ad agenda quae putabat seria cernebatur. et haec quidem medullitus multis gementibus agebantur.</p>
    <p>Pandente itaque viam fatorum sorte tristissima, qua praestitutum erat eum vita et imperio spoliari, itineribus interiectis permutatione iumentorum emensis venit Petobionem oppidum Noricorum, ubi reseratae sunt insidiarum latebrae omnes, et Barbatio repente apparuit comes, qui sub eo domesticis praefuit, cum Apodemio agente in rebus milites ducens, quos beneficiis suis oppigneratos elegerat imperator certus nec praemiis nec miseratione ulla posse deflecti.</p>
    <p>Et quia Montius inter dilancinantium manus spiritum efflaturus Epigonum et Eusebium nec professionem nec dignitatem ostendens aliquotiens increpabat, qui sint hi magna quaerebatur industria, et nequid intepesceret, Epigonus e Lycia philosophus ducitur et Eusebius ab Emissa Pittacas cognomento, concitatus orator, cum quaestor non hos sed tribunos fabricarum insimulasset promittentes armorum si novas res agitari conperissent.</p>
  </div>
</div>