html – 通过css计算动态高度

概述我有以下内容.从理论上讲,上面的图像和下面的div.图像和div适合整页,其中div获取图像高度的剩余部分,其中当内容溢出高度时,它可以是可滚动的. 关键词：具有动态高度的图像,纯css解决方案 我的问题是：这可能仅仅由css完成吗？ 我期待这样的事情 <div id="outer"> <img id="image" src="" style="width: 100%;"> <di 我有以下内容.从理论上讲,上面的图像和下面的div.图像和div适合整页,其中div获取图像高度的剩余部分,其中当内容溢出高度时,它可以是可滚动的.

关键词：具有动态高度的图像,纯CSS解决方案
我的问题是：这可能仅仅由CSS完成吗？

我期待这样的事情

<div ID="outer">    <img ID="image" src="" >    <div ID="inner" ></div></div>

解决方法 你可以使用flex：

HTML,body,#outer {  height:100%;  margin:0;  Box-sizing:border-Box;/* includes padding and border to size calculation */  }#outer {  display:flex;   flex-direction:column;  }#image {  wIDth:100%;  }#inner {  flex:1;/* will use whole space left below image if height is set to #outer */  background:tomato;  overflow:auto;   }

<div ID="outer">    <img ID="image" src="http://dummyimage.com/400x50&text=header_image" />    <div ID="inner" >inner <br/>inner <br/>inner <br/>inner <br/>inner <br/>inner <br/>inner <br/>inner <br/>inner <br/>inner <br/>inner <br/>inner <br/>inner <br/>inner <br/>inner <br/>inner <br/>inner <br/>inner <br/>inner <br/>inner <br/>inner <br/>inner <br/></div></div>

flex属性为https://jsfiddle.net/0j6xzdds/2/的示例

总结

以上是内存溢出为你收集整理的html – 通过css计算动态高度全部内容，希望文章能够帮你解决html – 通过css计算动态高度所遇到的程序开发问题。

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