Question

在过去的两个小时里，我一直在焚烧一些脑筋，试图解决这个问题。

我有一个固定的元素元素，其高度由max-height设置：60％。它的子高度由高度设置：100％，但它不能正确读取父高的高度，除非它由高度而不是最大高度指定。

我需要通过max-height设置外部元素，并且内部元素相应地限制其大小，但我找不到解决方案。看看小提琴：http://jsfiddle.net/raphadko/pe7gdms3/1/

<div style="position:fixed; transform:translate(-50%,-50%); top:50%; left:50%; max-height:60%; overflow:hidden; padding:50px; background:blue">
     <div style="background:red; overflow:hidden; height:100%;"> 
          Content
     </div>
</div>

我希望这个问题不会太混乱，小提琴更好地展示了这个例子。

Answer 1

你不能＆＃34; Set＆＃34;使用max-height的元素高度。 max-height属性只能用于限制元素的最大高度。因此，如果您需要特定高度，则必须使用height属性进行设置。

如果出于任何原因想要避免高度属性，可以使用max-height和min-height来解决它的问题。

第二部分的小提琴 http://jsfiddle.net/pe7gdms3/3/

<div style="position:fixed; transform:translate(-50%,-50%); top:50%; left:50%; max-height:60%;min-height:60%; overflow:hidden; padding:50px; background:blue">
    <div style="background:red; overflow:hidden; height:100%;"> 
    <h2>If the parent div has height set instead of max-height, the sizing would be fine.</h2>
    <ul style="height:auto; overflow:hidden;">
        <li>LOL</li>
    </ul>
    </div>
</div>

CSS计算属性中Max-Height与Height之间的差异

1 个答案: