Question

我有以下DOM：

<div id="parent" style="height: 200px;">
  <div id="header" style="height: 40px;"></div>
  <div id="content" style="max-height: 100%; overflow-y: auto"></div>
</div>

这会导致内容的高度为200px，但我希望它为160px。基本上父div具有可变高度，我希望内容div具有基于它的高度。标题高度是固定的。

我无法使用js来解决这个问题，因为实际的dom非常复杂并且使用JS会让它更复杂。

Answer 1

从主流程中拉出标题有效吗？

<div id="parent" style="height: 200px;position:relative;">
  <div id="header" style="height: 40px;position:absolute; top:0;"></div>
  <div id="content" style="padding-top:40px;max-height: 100%; overflow-y: auto"></div>
</div>

Answer 2

Flexbox可以做到这一点。

＆＃13;

#parent {
  height: 200px;
  display: flex;
  flex-direction: column
}
#header {
  flex: 0 0 40px;
  background: red;
}
#content {
  flex: 1;
  background: green;
}

＆＃13;

<div id="parent">
  <div id="header"></div>
  <div id="content"></div>
</div>

＆＃13;

Answer 3

执行此操作的一种方法是使用calc（）

#content {
  max-height: calc(100% - 40px);
  overflow-y: auto;
  background:tomato
}

FIDDLE

或者，您可以使用box-sizing来执行此操作：

#content {
  padding-top:40px;
  margin-top:-40px;
  position: relative;
  z-index:-1;
  box-sizing: border-box;
  max-height: 100%;
}

的 FIDDLE

Answer 4

如何使用calc（）？

#content {
  height: calc(100% - 40px); 
}

小提琴 - http://jsfiddle.net/upemxmmf/

Answer 5

<强> HTML

<div id="parent">
  <div id="header"></div>
  <div id="content"></div>
</div>

<强> CSS

#parent {
  background: teal;
  height: 200px;
}

#header {
  background: coral;
  height: 40px;
}

#content {
  background: #eee;
  max-height: calc(100% - 40px); /* 100% - height of header */
  overflow-y: auto
}

<强> DEMO

About calc()和 calc() support

如果你有两个div，如何使用最大高度和高度

5 个答案:

FIDDLE

的 FIDDLE