Question

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

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

我目前正在阅读有关调整子元素相对于父元素大小的大小的信息。例如，如果我给div元素分别为最小宽度和最大宽度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元素＆＃34; squishes＆＃34;降低到文本大小，反对调整到div元素大小的75％。这只有在我给出min-height和max-height值时才会发生;相反，如果我只提供一个固定的高度值（如上所述），那么p元素的高度是div元素的75％，但它也意味着没有＆＃34;动态＆＃34;发生的行为：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％肯定，但我想你必须与父标签高度相关，如果它没有定义，那么行为就不会像预期的那样。

true

容器的最小高度和最大高度以及儿童的相对高度

1 个答案: