CSS“高度:[百分比]"使用“保证金"的行为和/或“填充" [英] CSS "height: [percentage]" behaviour using "margin" and/or "padding"
问题描述
我与您分享了一个很棒的隐身名.我在尝试做一件非常简单的事情时发现了它-至少我认为这很简单.
I got an awesome incognita to share with you. I found it while trying to do a very simple thing - at least i thought it was simple.
具有固定高度值的父元素，其中包含任意数量的子元素.让我们以div为例，从2个孩子开始.
A parent element with a fixed height value which contains any number of child. Let's put divs as example, starting with 2 childs.
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
目标
设置子项的高度和垂直边距的样式，使其与父项的高度完全匹配，将总高度平均分配给子项元素.该解决方案应可重用于任何数量的子元素.当然可能需要某种计算.
The Goal
Style the child's height and vertical margin to match exactly the parent height, dividing the total height equally among the child elements. The solution should be reusable for any number of child elements. Of course some kind of calculation could be needed.
使用基于百分比的高度和边距不起作用.任何类似以下的解决方案...
Using percentage-based height and margin don't works. Any solution like the following...
.parent {
width: 5em; /* some fixed width */
height: 10em; /* some fixed height */
}
.child {
width: 100%;
margin-top: 4%;
height: 44%; /* let's render 3 gaps of 4% each (on top, middle and bottom) */
}
...将无法按预期方式渲染，因为垂直边距-以及填充-解析后的值都是基于父级的宽度，而不是您期望的父级高度. 此jsfiddle 通过以下测试演示了此行为:
... will fail to render as expected because the vertical margin - and padding too - resolved values are based on parent's width, not parent's height as you may expect. This jsfiddle demonstrates this behaviour with the following tests:
设置上边距和下边距.儿童的身高设置为100% - @margin-top - @margin-bottom
Set a margin-top and margin-bottom. Child's height is set to 100% - @margin-top - @margin-bottom
父级的高度高于其宽度.由于上述问题，浏览器在父级底部显示了一个空白.
Parent's height is higher than its width. The browser renders a gap on the bottom of the parent because of the mentioned problem.
父母的高度等于宽度.浏览器将按预期方式呈现，因为父级的宽度等于父级的高度，并且页边距已正确解析:
Parent's height is equal than its width. The browser renders as expected because parent's width is equal to the parent's height and the margin is resolved correctly:
@parent-width = @parent-height
@base = @parent-width
案例C
父母的身高低于其宽度.由于提到的问题，第二个孩子被剪掉了.
Case C
Parent's height is lower than its width. The second child is clipped because of the mentioned problem.
该测试用例演示了填充1的行为，如测试1那样.
This test cases demonstrate the padding behaviour as the test 1 does with the margin.
表明孩子的身高是从父母的身高解析出来的.如果我们不尝试放置边距或填充，浏览器将按预期呈现所有案例.
Demonstrates that the child's height is resolved from parent's height. The browser renders all cases as expected if we don't try to put some margin or padding.
如果您想研究第二个问题的答案，请使用此测试-见下文
This test is intended to be useful if you want to research an answer for the second question - see below
- 为什么垂直高度和填充基于父级的宽度而不是父级的高度?我在w3c规范上找不到任何内容.
- 达到预期目标的更好的可行解决方案是什么?
推荐答案
有趣的是……但我认为问题不在于垂直高度，它们都在我的浏览器中正确显示了(高度始终相对于父级的高度)，经过研究后，发现填充物和边距总是测量父母的宽度，
Interesting... but I think the problem isn't about vertical height, they all displayed correctly on my browser (height was always relative to parent's height), it is padding and margin that measure to parent's width always, after research though, I found this:
在所有情况下，％(百分比)都是有效值，但需要使用 小心地这些值是按父级的比例计算的 元素的宽度
In all cases % (percentage) is a valid value, but needs to be used with care; such values are calculated as a proportion of the parent element’s width,
http://www.w3.org/wiki/The_CSS_layout_model_-_boxes_borders_margins_padding
好收获，我不知道:)
这篇关于CSS“高度:[百分比]"使用“保证金"的行为和/或“填充"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
