html – 基于另一个div调整div高度的CSS方式

概述我有一个包含灵活区域,d出区域和页脚的div. >灵活的区域和页脚始终存在. >d出区域为0,40px或60px,因为其内容为 用js动态改变. >灵活区域应填充页脚上方的所有空间. 是否有一种仅限css的方法允许灵活区域根据d出窗口的大小增加/减少其高度？ 使用当前的css,当我删除jsfiddle中的d出窗口时,灵活性不会扩展以填充该区域. 我试图看看我是否可以在没有jquery或flexbo 我有一个包含灵活区域,d出区域和页脚的div.

>灵活的区域和页脚始终存在.
>d出区域为0,40px或60px,因为其内容为
用Js动态改变.
>灵活区域应填充页脚上方的所有空间.

是否有一种仅限CSS的方法允许灵活区域根据d出窗口的大小增加/减少其高度？

使用当前的CSS,当我删除Jsfiddle中的d出窗口时,灵活性不会扩展以填充该区域.

我试图看看我是否可以在没有jquery或flexBox的情况下做到这一点,以获得最大的兼容性.

感谢您的建议/意见！

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>

解决方法 使用flexBox可以实现所需的结果.

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

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

在容器上,您可以使用flexBox告诉它表现为列：

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

对于孩子们来说同样需要这样,因为灵活,d出和页脚的内容布局是列.

现在最重要的部分. flexbile div应该占用可用空间,而它下面的div不应该占用.因此,我们可以应用以下内容：

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

这告诉灵活使用可用空间,d出不要.有关flex选择器如何工作的更多信息,请参阅https://developer.mozilla.org/en/docs/Web/CSS/flex

JS Fiddle example

总结

以上是内存溢出为你收集整理的html – 基于另一个div调整div高度的CSS方式全部内容，希望文章能够帮你解决html – 基于另一个div调整div高度的CSS方式所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。