Question

我正在进行模态布局，并努力将高度上下文从父元素传递到其子元素。看一下this CodePen，.child-child需要与.child的高度相同。

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

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

非常感谢任何帮助！

Answer 1

我认为唯一可能的解决方案是使用.sold滚动来实现：overflow：y：scroll;。

我的演示。

.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和位置：固定到按钮;

工作演示。

编辑如果你想将buttom放在右边，你必须使用right：calc（（100％ - 600px）/ 2）;.

工作演示。

P.S。请参阅calc（）浏览器支持。

Answer 2

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

我的Demo。

＆＃13;

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

＆＃13;

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

＆＃13;

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

修改如果你想放置按钮，你可以但是你必须将position:relative设置为.child并将position:fixed设置为按钮;

工作DEMO。

修改如果您想将buttom置于右侧，则必须使用right:calc((100% - 600px)/2);。

工作DEMO。

P.S。请参阅calc()浏览器支持there。

Answer 3

这是你要找的吗？

$(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>

将子元素设为父级max-height

3 个答案: