HTML div超出父容器的max-height

Question

我知道有很多问题要求同样的事情，但我遇到的解决方案都没有适用于我设置的场景。

我有一个简单的结构，有一个主外部div和一个内部div。在内部div中，我分别分为两个10％和90％的高度。第二次分离似乎超出了max-height设定的限制，我似乎无法弄清楚原因。

修改 我需要滚动条出现在第二个分隔（.content）而不是内部div（.main-body）

＆＃13;

＆＃13;

.outer-layer {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .6);
  z-index: 15000;
  top: 0;
  left: 0;
  padding: 10px;
}
.main-body {
  position: fixed;
  top: 18%;
  left: 18%;
  background: #fff;
  width: 60%;
  min-height: 30%;
  max-height: 60%;
  padding: 10px;
}
.header {
  height: 10%;
  max-height: 10%;
  background: red;
}
.content {
  max-height: 90%;
  width: calc(100% - 20px);
  height: 90%;
  background: blue;
  padding: 10px;
  overflow: auto;
}

＆＃13;

<div class="outer-layer">
  <div class="main-body">
    <div class="header">
      <h2>Hello</h2>
      <!--header-->
    </div>
    <div class="content">
      <p>dynamic content</p>
      <p>dynamic content</p>
      <p>dynamic content</p>
      <p>dynamic content</p>
      <p>dynamic content</p>
      <p>dynamic content</p>
      <!--content-->
    </div>
    <!--body-->
  </div>
  <!--overlay-->
</div>

＆＃13;

＆＃13;

＆＃13;

我目前正在使用Chrome进行测试

我添加了此Fiddle

Answer 1

this JSFiddle你的目标是什么？

您的原始版本中有一些轻微的打嗝，我已整理并概述如下......

1。您不能在父级没有设置高度的元素上使用基于百分比的高度。因为您没有给.main-body一个设定的高度，所以它的孩子不会尊重基于百分比的高度。这可以通过给.main-body一个高度来解决。

2。您的<h2>具有较大的垂直边距，因此其高度正在超过其父级的高度。通过h2 {margin: 0;}删除这些。

3. 请记住，填充添加！元素顶部和底部的10px填充将增加20px的高度。您可以在元素上使用box-sizing: border-box;来避免这种情况 - 它会强制元素向内而不是向外应用其填充，从而不会弄乱它＆＃39;高度/宽度。

Answer 2

页面需要呈现信息。假设内部内容大于外部内容，使用overflow为您创建滚动条。

.main-body {
  overflow-y: scroll;
}

http://www.w3schools.com/cssref/pr_pos_overflow.asp

发布编辑更新：

.header {
  position:fixed;
  width: 60%;
}

.content {
  margin-top: 10%; // To match the header's height
}

样式将关闭，但您可以调整它以更好地适应您的项目。

Answer 3

JSfiddle：https://jsfiddle.net/nu5LkL6b/9/

如上所述：您不能在父级没有设置高度的元素上使用基于百分比的高度。因为你不给.main-body一个设定的高度，它的孩子不会尊重基于百分比的高度。这可以通过给.main-body一个高度来解决。

Little Enhc：

.content {
  max-height: 90%;
  width: calc(100% - 20px);
  height: calc(90% - 20px);
  background: blue;
  padding: 10px;
  overflow: auto;
}

CSS：

.outer-layer {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .6);
  z-index: 15000;
  top: 0;
  left: 0;
  padding: 10px;
}
.main-body {
  position: fixed;
  top: 18%;
  left: 18%;
  background: #fff;
  width: 60%;
  min-height: 30%;
  height: 60%;
  padding: 10px;
}
.header {
  height: 10%;
  max-height: 10%;
  background: red;
}
.content {
  max-height: 90%;
  width: calc(100% - 20px);
  height: calc(90% - 20px);
  background: blue;
  padding: 10px;
  overflow: auto;
}
h2 {
  margin-top: 0;
}

Answer 4

您的h2有＆＃34;原生＆＃34;保证金被添加到main-body高度并打破百分比。删除此边距。然后你的main-body有填充，也会添加额外的像素。删除它，90% + 10%将适合100%。

＆＃13;

＆＃13;

h2 {
    margin: 0;
}

.outer-layer {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .6);
  z-index: 15000;
  top: 0;
  left: 0;
  padding: 10px;
}
.main-body {
  position: fixed;
  top: 18%;
  left: 18%;
  background: #fff;
  width: 60%;
  min-height: 30%;
  max-height: 60%;
}
.header {
  height: 10%;
  max-height: 10%;
  background: red;
}
.content {
  max-height: 90%;
  width: calc(100% - 20px);
  height: 90%;
  background: blue;
  padding: 10px;
  overflow: auto;
}

＆＃13;

<div class="outer-layer">
  <div class="main-body">
    <div class="header">
      <h2>Hello</h2>
      <!--header-->
    </div>
    <div class="content">
      <p>dynamic content</p>
      <p>dynamic content</p>
      <p>dynamic content</p>
      <p>dynamic content</p>
      <p>dynamic content</p>
      <p>dynamic content</p>
      <!--content-->
    </div>
    <!--body-->
  </div>
  <!--overlay-->
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

您需要为父元素添加高度，即var topSkills = []; var topRates = []; JSONObj.skills.sort((a, b) => b.rate - a.rate).forEach(item => { topSkills.push(item.skill); topRates.push(item.rate); });

.main-body