html – 父级具有最小最大高度时的CSS百分比高度

概述我知道当您在元素上使用百分比高度时,百分比是其父级的百分比.假设你想要一个孩子是其父母的40％.父项具有分配最大和最小高度,但没有指定明确的高度.例如： <div id="container"> <div id="one"> <div id="two"></div> </div></div> CSS #container{ height: 500px; backgroun 我知道当您在元素上使用百分比高度时,百分比是其父级的百分比.假设你想要一个孩子是其父母的40％.父项具有分配最大和最小高度,但没有指定明确的高度.例如：

<div ID="container">  <div ID="one">    <div ID="two"></div>  </div></div>

CSS

#container{  height: 500px;  background: yellow;}#one{  background: red;  min-height:100px;  max-height: 50%;  padding: 10px;}#two{  background: blue;  height: 40%;}

div二不会出现.当您将父级(div 1)的CSS从此最大高度更改为50％时：height：50％div将出现两次,因为它知道父级的高度是因为它被明确定义.我的问题是在使用(最小/最大) – 高而不是高度时使div两个出现的方法

这是一个fiddle

解决方法 检查一下,你错过了一小块.假设你想设置#one的高度与#container相比,#two与#one相比(这是我认为你要做的).我们需要一个#one的高度语句来获取#two的高度.这里的技巧是为元素设置一个最大高度,一个最小高度和一个高度,从而给出一个由最小值和最大值约束的高度.

尝试这个CSS：

<style> #container{   height: 74vh;   background: yellow; } #one{   background: red;   min-height:100px;   max-height: 50%;   height: 100%;   padding: 10px; } #two{   background: blue;   height: 40%; } </style>

高度永远不会实现,因为它受到最大高度限制,但没有声明高度是height：auto,它是未声明的.我将#container的高度设置为74vh,以使整个事物根据视口的大小进行响应.

总结

以上是内存溢出为你收集整理的html – 父级具有最小/最大高度时的CSS百分比高度全部内容，希望文章能够帮你解决html – 父级具有最小/最大高度时的CSS百分比高度所遇到的程序开发问题。

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