首页 文章

使用“margin”和/或“padding”的CSS“height：[percentage]”行为

提问于
浏览 次
0

我有一个很棒的incognita与你分享 . 我在尝试做一件非常简单的事情时发现了它 - 至少我认为这很简单 .

舞台

具有固定高度值的父元素，其中包含任意数量的子元素 . 我们以div为例，从2个孩子开始 .

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
</div>

目标

将孩子的身高和垂直边距设置为与父高度完全匹配，将子高度中的总高度平均分配 . 解决方案应该可以重用于任何数量的子元素 . 当然可能需要进行某种计算 .

问题

使用基于百分比的高度和边距不起作用 . 任何解决方案如下...

.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) */
}

...将无法按预期呈现，因为垂直边距 - 以及填充 - 已解析的值基于父级's width, not parent'的高度，如您所料 . This jsfiddle通过以下测试演示了此行为：

测试1

设置保证金顶部和保证金底部 . 孩子的身高设置为 100% - @margin-top - @margin-bottom

案例A.

父母的身高高于宽度 . 由于上述问题，浏览器会在父级底部产生间隙 .

案例B

父亲的身高等于其宽度 . 浏览器按预期呈现，因为父级的宽度等于父级的高度，并且正确解析了边距：

@parent-width = @parent-height
@base = @parent-width

案例C

父母的身高低于宽度 . 由于上述问题，第二个孩子被剪掉了 .

测试2

此测试用例演示了测试1对边距的填充行为 .

测试3

证明孩子的身高是从父母的身高解决的 . 如果我们不尝试放置一些边距或填充，浏览器会按预期呈现所有情况 .

测试4

如果您想研究 the second question 的答案，此测试非常有用 - 见下文

问题

  • 为什么垂直高度和填充基于父's width rather than parent'的高度？我在w3c规格上找不到任何东西 .

  • 达到预期目标的更好的解决方案是什么？

css css3 layout responsive-design fluid-layout

2 回答

  • 1

    有趣......但我认为问题不在于垂直高度，它们都在我的浏览器上正确显示（高度总是相对于父母的身高），它是填充和边距，总是测量到父母的宽度，但是经过研究，我发现了这个：

    在所有情况下，％（百分比）是有效值，但需要小心使用;这些值是按父元素宽度的比例计算的，

    http://www.w3.org/wiki/The_CSS_layout_model_-_boxes_borders_margins_padding

    好抓，我从来不知道:)

    回复于
  • 1

    今天我解决了同样的问题，我发现新的相对单位 vh （CSS 3）在这种情况下非常有用：它的工作方式与百分比相同，但相对于视口的 height （相对宽度使用 vw ） . 如果与视口而不是父视图的相关性不是问题，那么这是一个纯CSS解决方案 .

    回复于

相关问题