Question

我有一个包含灵活区域，弹出区域和页脚的div。

灵活的区域和页脚始终存在。
弹出区域为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>

Answer 1

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

Answer 2

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

CSS方法根据另一个div调整div的高度

2 个答案: