基于另一个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方法

回答

相关问题