將子元素設為父元素最大高度的100％高度

Question

我正在研究模式布局，並努力將高度上下文從父元素傳遞到其子元素。 看一下此CodePen ， .child-child需要與.child相同的高度。

一種解決方案是將max-height: 50%;更改max-height: 50%; height: 50%; ; 這是不可用的，因為有時模態將不會包含那么多內容，而應僅與它所包含的內容一樣高，那么當有很多內容時，它就不能超過其max-height 。

另一種解決方案是去實現Flexbox和設置.child作為Flex容器將設置.child-child全高度柔性容器默認情況下做到; 您可以在此CodePen中看到這一點 。 實際上，這在大多數瀏覽器中都能很好地工作，並且完全滿足我的需要，但是在IE10 / 11 +中完全失敗； 請注意，我在CodePen設置中使用了autoprefixer，因此我懷疑這將是flexbox語法問題。 也許我需要為IE添加其他一些flex屬性，例如flex-grow / flex-shrink等。我嘗試了很多運氣不佳的組合，但我似乎也找不到與Google相關的特定錯誤。

任何幫助將不勝感激！

Answer 1

我認為唯一可能的解決方案是使.child scrollale與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>

編輯如果要放置按鈕，則可以，但是必須將position：相對於.child設置為position：fixed到按鈕；

工作演示。

編輯如果要在右側放置按鈕，則必須使用right：calc（（100％-600px）/ 2）;。

工作演示。

PS在那里看到calc（）瀏覽器支持。

Answer 2

我認為唯一可能的解決方案是使.child scrollale與.child 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> 

PS：如果要保留填充，則必須應用overflow-y:scroll; 到一個兒童容器。

編輯如果要放置按鈕，則可以，但是必須將position:relative對於.child設置為position:fixed到按鈕；

工作演示 。

編輯如果要在右側放置按鈕，則必須使用right:calc((100% - 600px)/2); 。

工作演示 。

PS見calc()瀏覽器支持那里 。

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>