容器的最小高度和最大高度以及子项的相对高度

Question

考虑以下 HTML，它由 div 容器中的一个段落组成：

<div><p>Paragraph of text...</p></div>

我目前正在阅读有关调整子元素相对于父元素大小的大小的内容。例如，如果我给 div 元素的 min-width 和 max-width 分别为 300px 和 500px，p 元素的宽度为 75%，那么当我调整浏览器窗口时，div 元素的大小也会相应调整，和 p 元素一样，保留它与 div 元素的关系。 CSS 可能类似于：

div {min-width:300px;
     max-width:500px;
     height:500px;
     background-color:Pink;}
p {width:75%;
   height:75%;
   background-color:rgb(0,20,80);}

这很好用。但是，如果我尝试对高度进行相同操作，则不会发生此行为；相反，p 元素“挤压”到文本大小，而不是调整到 div 元素大小的 75%。这只发生在我给出 min-height 和 max-height 值时；相反，如果我只给出一个固定的高度值（如上），那么 p 元素的高度是 div 元素的 75%，但这也意味着没有发生“动态”行为： div 和 p 元素都是固定的。以下是我认为需要的，但似乎不起作用：

div {min-width:300px;
     max-width:500px;
     min-height:300px;
     max-height:500px;
     background-color:Pink;}
p {width:75%;
   height:75%;
   background-color:rgb(0,20,80);}

Answer 1

我将您的代码复制到一个普通的 html 页面，并注意到如果我上到最高的 html 标记，基本上到每个父标记到 div，它就可以工作。

不能说我 100% 确定，但我猜你必须与父标签高度相关，如果未定义，则行为与预期不符。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        html, body { height:100%; /*Can also use 100vh*/ }

        div {
            min-width: 300px;
            max-width: 500px;
            min-height: 300px;
            max-height: 500px;
            background-color: Pink;
            height: 100%;
        }
        p {
            width: 75%;
            height: 75%;
            background-color: rgb(0,20,80);
        }
    </style>
</head>
<body>
    <div><p>Paragraph of text...</p></div>
</body>
</html>