浏览器的高度计算：包含块和子元素
在SO本身中进行了选择-由浏览器（当我们没有显式设置a height而是设置a时min-height）为具有 子 容器
（相对于容器的高度百分比）的“高度计算” ： __
-
如果不设置高度，则进行设置
min-height，但不起作用，请注意，计算出的height值是我给定的min-height。孩子们没有达到我给他们的50％的身高-见下文：* { box-sizing: border-box; } .inline-container, .block-container, .float-container, .inline-block-container { border: 1px solid red; min-height: 100px; } .inline-container > * { border: 1px solid; height: 50%; } .block-container > * { border: 1px solid; height: 50%; } .float-container > * { float: left; border: 1px solid; height: 50%; } .float-container:after { clear: both; content: ''; display: block; } .inline-block-container > * { display: inline-block; border: 1px solid; height: 50%; } <body> <div class="inline-container"> <span>Inline 1</span> <span>Inline 2</span> </div> <div class="block-container"> <div>Block 1</div> <div>Block 2</div> </div> <div class="float-container"> <div>Float 1</div> <div>Float 2</div> <div>Float 3</div> </div> <div class="inline-block-container"> <div>Inline block 1</div> <div>Inline block 2</div> <div>Inline block 3</div> </div> </body> -
现在，我将
height: 0其设置为有效！请参见下面的示例：* { box-sizing: border-box; } .inline-container, .block-container, .float-container, .inline-block-container { border: 1px solid red; min-height: 100px; height: 0; } .inline-container > * { border: 1px solid; height: 50%; } .block-container > * { border: 1px solid; height: 50%; } .float-container > * { float: left; border: 1px solid; height: 50%; } .float-container:after { clear: both; content: ''; display: block; } .inline-block-container > * { display: inline-block; border: 1px solid; height: 50%; } <body> <div class="inline-container"> <span>Inline 1</span> <span>Inline 2</span> </div> <div class="block-container"> <div>Block 1</div> <div>Block 2</div> </div> <div class="float-container"> <div>Float 1</div> <div>Float 2</div> <div>Float 3</div> </div> <div class="inline-block-container"> <div>Inline block 1</div> <div>Inline block 2</div> <div>Inline block 3</div> </div> </body>
题：
所以我的问题是-这里发生了什么-我真的很惊讶！当我给它最小高度时，为什么孩子们不尊重包含块的计算高度。你们可以看看这个吗？
问题答案：
MDN的 height
CSS属性：
百分比
相对于生成的盒子的包含块的高度计算百分比。
如果未明确指定包含块的高度（即，它取决于内容的高度），并且该元素的位置不是绝对的，则该值将计算为auto。
根元素上的百分比高度是相对于初始包含块的高度。
在中1.，未明确指定父级的 height 属性，因此该值计算为 auto 。
在中2.，指定了 height 属性，因此它是相对于父级计算的
-
我是JavaFX的新手，我正在编写一个简单的登录应用程序，我想在我的web浏览器中启动它。 我如何获得web浏览器的宽度和高度？是否有一些对象用于此目的，或一个方法，我希望能够调整应用程序的大小，每当浏览器的大小改变。
-
问题内容： 当我使用Chrome开发人员工具检查定位标记的大小时，它会向我显示第一个元素和第二个元素。 我想知道为什么它不包含包含元素的高度和宽度以及它是如何计算的。 问题答案： 在CSS 2.1规范说 框内容区域的尺寸（内容宽度和内容高度）取决于几个因素：生成框的元素是否设置了“宽度”或“高度”属性，该框是否包含文本框或其他框，是否框是一个表格，等等。框的宽度和高度将在有关可视格式模型详细信息的
-
问题内容： 我正在通过XML数据生成pdf文件。 我将段落元素的高度计算为： 但是这种方法不能正常工作。 你能给我个主意吗？ 问题答案： 您的问题很奇怪。根据您的问题的标题，您想知道字符串的高度，但是您的代码显示您要求的是字符串的宽度。 请看一下FoobarFilmFestival示例。 如果是实例，则可以使用： 当我们使用12号字体时，这将返回基线以上的高度和基线以下的高度。您可能知道，字体大小
-
本文向大家介绍计算Python列表中包含给定元素的子列表，包括了计算Python列表中包含给定元素的子列表的使用技巧和注意事项，需要的朋友参考一下 给定列表中的元素也可以作为另一个字符串出现在另一个变量中。在本文中，我们将查看给定列表中给定流出现了多少次。 随着范围和镜头 我们使用range和len函数来跟踪列表的长度。然后使用in条件查找字符串在列表中作为元素出现的次数。每当满足条件时，初始化为
-
我需要告诉用户对我的网站使用的浏览器。（编辑：用户需要添加书签，这在标准的“互联网”浏览器上是不可能的。我需要知道要向他们显示什么消息。） 我不需要任何类型的浏览器。具体来说，在这种情况下，我需要能够检测浏览器是否真的是Google Chrome浏览器。 对于至少一个智能设备，我很难区分股票“互联网”浏览器和Chrome；两者都包含“Chrome”这个词。 三星galaxy s5： 股票浏览器用户
-
问题内容： 我想让主体具有浏览器高度的100％。我可以使用CSS吗？ 我尝试设置，但不起作用。 我想为页面设置背景色以填充整个浏览器窗口，但是如果页面内容很少，我将在底部看到一个难看的白色条。 问题答案： 尝试将html元素的高度也设置为100％。 Body向其父级（HTML）寻求如何缩放动态属性，因此HTML元素也需要设置其高度。 但是，身体的内容可能需要动态更改。将最小高度设置为100％将实现