html - 适合内容高度的两个div

Question

我有一个 div (.main-div)，它包含两个内部 div(.title-div 和 .body-div) .它们必须在两个方向上都符合 .main-div 的大小。

.title-div 的固定高度为 25px。

有时 .title-div 可以被隐藏。但是当我这样做时，我的 .body-div 上升但不适合 .main-div 因为它的高度属性是错误的。

我希望我的 .body-div 始终适合其父级的可用空间

.main-div {
  height: 150px;
  width: 150px;
  background-color: lightgray;
  border: 1px solid black;
}
.title-div {
  height: 25px;
  width: 100%;
  background-color: lightblue;
}
.body-div {
  height: calc(100% - 25px);
  width: 100%;
  background-color: green;
}
/* from bootstrap*/

.hidden {
  display: none !important;
  visibility: hidden !important;
}

<div class="main-div">
  <div class="title-div">
    title
  </div>
  <div class="body-div">
    body
  </div>
</div>

这是一个 fiddle : https://jsfiddle.net/g8zef0ux/

有什么想法吗？

Answer 1

您可以做几件事。这里有两种可能的解决方案。

在我的第一个示例中，在隐藏标题的同时，我们向正文添加了一个额外的类，以使其更高。它会覆盖您的计算，并将高度设置为 100%。

在第二个示例中，我们使用 CSS3 Flexbox 模块使正文增长以填充所有可用空间。当标题出现时，设置不增长，不收缩，保持25px，body填充其余部分。当标题消失时，正文会填满整个可用空间。

$(".btn1").click(function() {
	$(".title-div1").toggleClass("hidden");
    $(".body-div1").toggleClass("body-div-noTitle");
});

$(".btn2").click(function() {
	$(".title-div2").toggleClass("hidden");
});

.main-div1 {
  height: 150px;
  width: 150px;
  background-color: lightgray;
  border: 1px solid black;
}

.title-div1 {
  height: 25px;
  width: 100%;
  background-color: lightblue;
}

.body-div1 {
  height: calc(100% - 25px);
  width: 100%;
  background-color: green;
}

.body-div-noTitle {
  height:100%;
}

.main-div2 {
  height: 150px;
  width: 150px;
  background-color: lightgray;
  border: 1px solid black;
  display:flex;
  flex-direction:column;
}

.title-div2 {
  flex: 0 0 25px;
  width: 100%;
  background-color: lightblue;
}

.body-div2 {
  flex:1;
  width: 100%;
  background-color: green;
}

/* from bootstrap*/
.hidden {
  display: none !important;
  visibility: hidden !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-div main-div1">
  <div class="title-div  title-div1">
    title
  </div>
  <div class="body-div body-div1">
    body
  </div>
</div>
<br>
<br>
<input class="btn1" type="button" value="Toggle title visibility" />

<div class="main-div main-div2">
  <div class="title-div  title-div2">
    title
  </div>
  <div class="body-div body-div2">
    body
  </div>
</div>
<br>
<br>
<input class="btn2" type="button" value="Toggle title visibility" />