基於另一個div調整div高度的CSS方法

我有一個包含靈活區域，彈出區域和頁腳的div。基於另一個div調整div高度的CSS方法

靈活區域和頁腳始終存在。
彈出區域爲0,40px或60px，因爲它的內容是，動態更改爲js。
靈活的面積應填寫所有頁腳上方的空間。

是否有隻CSS的方法，以允許靈活的區域基於彈出窗口的尺寸增大/減小它的高度是多少？

與目前的CSS我有，當我刪除的jsfiddle彈出，靈活不擴大，以填補區域。

我想看看我能做到這一點沒有的jQuery或Flexbox的麥克斯兼容性。

感謝您的建議/意見！

div { 
 
    color: #ffffff; 
 
} 
 
#container { 
 
    height: 100vh; 
 
    width: 100vw; 
 
} 
 
#flexible { 
 
    background-color: red; 
 
    width: 100vw; 
 
    min-height: 68vh; 
 
    max-height: 80vh; 
 
} 
 
#popup { 
 
    width: 90%; 
 
    max-height: 60px; 
 
    min-height: 40px; 
 
    line-height: 20px; 
 
    overflow-y: scroll; 
 
    position: absolute; 
 
    bottom: 0; 
 
    margin-bottom: 50px; 
 
    background-color: #cccccc; 
 
} 
 
#footer { 
 
    width: 90%; 
 
    height: 50px; 
 
    background-color: #666666; 
 
    position: absolute; 
 
    bottom: 0; 
 
}

<div id="container"> 
 
    <div id="flexible"> 
 
    1content 
 
    <br/>2content 
 
    <br/>3content 
 
    <br/> 
 
    </div> 
 
    <div id="popup"> 
 
    1popup 
 
    <br/>2popup 
 
    <br/>3popup 
 
    <br/>4popup 
 
    <br/>5popup 
 
    <br/> 
 
    </div> 
 
    <div id="footer"> 
 
    footer 
 
    </div> 
 
</div>

來源

2016-08-28 Tien Yuan

隨着彈出是絕對的，你沒有任何可能的方式只用CSS來做到這一點。唯一的解決方案是JavaScript。只有當您不使用絕對定位時，Flexbox纔會起作用。使用JS的問題是什麼？你甚至不必使用jQuery，只需簡單的香草JS。 –

相鄰和下一個相鄰的選擇器？jQuery是最大兼容性;） –

是的，如果有必要，我可以使用flexbox或js。只是想知道是否有一些聰明我可以嘗試。感謝您的評論。 –

期望的結果可以與Flexbox的實現。

首先，它是從代碼消除<br/>個好主意。您可以將這些項目放入<div>。

... 
<div>1content</div> 
<div>2content</div> 
<div>3content</div> 
...

在容器中，可以使用Flexbox，就告訴它表現爲一個列：

#container { 
    display: flex; 
    flex-flow: column wrap; 
}

這同樣需要爲孩子們，因爲對flexible，popup內容的佈局，和footer是列。

現在最重要的部分。 flexbile div應該佔用可用空間，而下面的div不應該佔用空間。因此，我們可以採用如下：

#flexible { 
    display: flex; 
    flex: 1 0 auto; 
} 

#popup { 
    display: flex; 
    flex: 0 1 auto; 
}

這告訴flexible利用現有空間，popup不是。有關flex選擇如何工作的詳細信息，請參閱https://developer.mozilla.org/en/docs/Web/CSS/flex

JS Fiddle example

來源

2016-08-28 19:55:22 alanbuchanan

感謝您的示例。是的，我會按照您的建議將其轉換爲彈性框。 –

<html> 
    <head> 
     <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=2.5; user-scalable=YES" /> 
     <meta http-equiv="Content-Type" content="text/html; accept-charset=UTF-8"> 
    <style> 
    .EqHeightDiv{ 
     float:left; 
border:solid 1px #ccc; 
background:#0CF; 
margin:10px; 
max-width:300px; 
padding:10px; 
} 
    </style> 

    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript"> 
    function equalHeight(group) { 
     tallest = 0; 
     group.each(function() { 
      thisHeight = $(this).height(); 
      if(thisHeight > tallest) { 
       tallest = thisHeight; 
      } 
     }); 
     group.height(tallest); 
    } 

    $(document).ready(function(){ 
     equalHeight($(".EqHeightDiv")); 
    }); 
    </script> 
    </head> 

    <body> 
    <div class="EqHeightDiv">Here is some stuff</div> 
    <div class="EqHeightDiv">Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some </div> 
    <div class="EqHeightDiv">Here is some stuff</div> 
    </body> 

    </html>

來源

2016-08-29 13:16:57

基於另一個div調整div高度的CSS方法

回答

相關問題