Question

我有一个div（.main-div），其中包含两个内部div（.title-div和.body-div）。它们必须适合.main-div的大小。

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

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

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

这是一个小提琴： https://jsfiddle.net/g8zef0ux/

有什么想法吗？

Answer 1

你可以做几件事。以下是两种可能的解决方案。

在我的第一个例子中，在您隐藏标题的同时，我们会在身体上添加一个额外的类，以使其更高。它会覆盖你的calc，并将高度设置为100％。

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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" />

＆＃13;

Answer 2

您可以使用flexbox轻松实现此目的。 https://jsfiddle.net/g8zef0ux/2/

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

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

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

Answer 3

我认为你在这里问的是解决方案：

https://jsfiddle.net/g8zef0ux/

我添加了一个检查，看它是否包含隐藏的类：

if (!$(".title-div").hasClass('hidden')) {
    $(".body-div").css('height', '100%').css('height', '-=25px');
    }else{
    $(".body-div").css('height', '100%');
  }

如果为true，则相应地调整高度。

两个div适合内容高度

3 个答案: