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

Question

考虑以下HTML，该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元素“压缩”到文本大小，而不是调整到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>

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-02-21 19:00:03

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-02-21 19:00:03

解决方案1
0 已采纳 2018-02-21 19:00:03