使子元素的高度为父元素 max-height 的 100%

Question

我正在处理模态布局并努力将高度上下文从父元素传递到其子元素。看看this CodePen，.child-child需要和.child等高。

解决此问题的一个方法是将max-height: 50%; 更改为height: 50%;；这是不可用的，因为有时模态不会包含那么多内容并且应该只与它包含的内容一样高，然后当有很多内容时它不应该超过它max-height。

另一个解决方案是使用 flexbox 并将 .child 设置为弹性容器，这将设置 .child-child 弹性容器默认执行的全高；您可以在this CodePen 中看到这一点。这实际上在大多数浏览器中都很好用，并且完全符合我的需要，但在 IE10/11+ 中完全失败；请注意，我在 CodePen 设置中使用了 autoprefixer，所以我怀疑这将是一个 flexbox 语法问题。也许我需要为 IE 添加一些其他 flex 属性，例如 flex-grow / flex-shrink 等。我尝试了很多不同的组合，但运气不佳，我似乎也无法在 Google 上找到这个特定的错误.

任何帮助将不胜感激！

Answer 1

我认为唯一可能的解决方案是将.child 与overflow-y:scroll; 一起滚动。

我的Demo。

.parent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: red;
}

.child {
  background: blue;
  max-height: 50%;
  max-width: 600px;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  overflow-y:scroll;
}

.child-child {
  background: green;
  height: 100%;
  overflow: auto;
}

<div class="parent">
  <div class="child">
    <div class="child-child">
      <p>Blah.</p>
      <p>Blah.</p>
      <p>Blah.</p>
      <p>Blah.</p>
      <p>Blah.</p>
      <p>Blah.</p>
      <p>Blah.</p>
      <p>Blah.</p>
      <p>Blah.</p>
      <p>Blah.</p>
      <p>Blah.</p>
      <p>Blah.</p>
      <p>Blah.</p>
      <p>Blah.</p>
      <p>Blah.</p>
      <p>Blah.</p>
      <p>Blah.</p>
    </div>
  </div>
</div>

附：如果要保留填充，则必须将 overflow-y:scroll; 应用于子容器。

编辑 如果你想放置按钮，你可以但是你必须将 position:relative 设置为 .child 和 position:fixed 到按钮；

工作DEMO。

编辑 如果要将按钮定位在右侧，则必须使用right:calc((100% - 600px)/2);。

工作DEMO。

附：见calc()浏览器支持there。

Answer 2

这就是你要找的吗？

$(document).ready(function() {
  $('.plus-btn').on('click', function() {
    $(this).closest('.parent').toggleClass('active');
  });
});

*{
  box-sizing: border-box;
}
.parent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: red;
}
.top-right {
  position: absolute;
  top: 0;
  right: 0;
}
.plus-btn {
  overflow: hidden;
  position: relative;
  cursor: pointer;
  width: 20px;
  height: 20px;
  display: inline-block;
  background: #f0f0f0;
}
.plus-btn span {
  position: absolute;
  margin: 45% 10%;
  width: 80%;
  height: 10%;
  background: #222;
  border-radius: 4px;
  pointer-events: inherit;
  -webkit-transition: -webkit-transform .3s;
  transition: transform .3s;
}
.plus-btn span:first-child {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.plus-btn span:last-child {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.parent.active .plus-btn span:first-child {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.parent.active .plus-btn span:last-child {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.child {
  background: blue;
  max-height: 50vh;
  max-width: 600px;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
}

.child-child {
  background: green;
  overflow-y: auto;
  width: 100%;
  height: 100%;
  max-height: 0;
  -webkit-transition: max-height .3s;
  transition: max-height .3s;
}
.parent.active .child-child {
  max-height: calc(50vh - 40px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="child">
    <div class="top-right">
      <div class="plus-btn">
        <span></span>
        <span></span>
      </div>
    </div>
    <div class="child-child">
      <p>Blah.</p>
      <p>Blah.</p>
      <p>Blah.</p>
      <p>Blah.</p>
      <p>Blah.</p>
      <p>Blah.</p>
      <p>Blah.</p>
      <p>Blah.</p>
      <p>Blah.</p>
      <p>Blah.</p><p>Blah.</p>
      <p>Blah.</p>
      <p>Blah.</p>
    </div>
  </div>
</div>

Answer 3

我认为唯一可能的解决方案是使用 overflow-y:scroll; 制作 .child 滚动。

我的演示。

.parent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: red;
}

.child {
 background: blue;
 max-height: 50%;
 max-width: 600px;
 width: 100%;
 position: absolute;
  top: 50%;
 left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
overflow-y:scroll;
}

.child-child {
 background: green;
  height: 100%;
 overflow: auto;
}
 <div class="parent">
      <div class="child">
     <div class="child-child">
      <p>Blah.</p>
       <p>Blah.</p>
       <p>Blah.</p>
       <p>Blah.</p>
       <p>Blah.</p>
       <p>Blah.</p>
       <p>Blah.</p>
       <p>Blah.</p>
       <p>Blah.</p>
       <p>Blah.</p>
       <p>Blah.</p>
       <p>Blah.</p>
       <p>Blah.</p>
       <p>Blah.</p>
       <p>Blah.</p>
       <p>Blah.</p>
       <p>Blah.</p>
     </div>
   </div>
 </div>

编辑如果你想放置按钮，你可以但是你必须设置位置：相对于 .child 和位置：固定到按钮；

工作演示。

编辑如果要将按钮放置在右侧，则必须使用 right:calc((100% - 600px)/2);.

工作演示。

附：在那里查看 calc() 浏览器支持。