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

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

灵活区域和页脚总是存在。
pop -area是0,40px或60px，因为它的内容是

是否有一个css唯一的方法来允许灵活的区域增加/减少其高度基于弹出框的大小?

使用当前的css，当我删除jsfiddle中的弹出框时，flexible不会扩展以填充该区域。

我想看看我是否可以做到这一点没有jquery或flexxbox最大的兼容性。

谢谢你的建议/评论!

https://jsfiddle.net/L8me7fLk/

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>

使用flexx可以达到预期的结果。

首先，从代码中消除<br/>是一个好主意。您可以将这些项目放在<div> s中。

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

在容器上，您可以使用flexbox来告诉它表现为列:

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

子元素也同样需要这样做，因为flexible、popup和footer的内容布局是列。

现在最重要的部分。flexbilediv应该占用可用空间，而它下面的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示例

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

相关内容

最新更新

热门标签：