【问题标题】:Setting height: 100% on my label element doesn't work在我的标签元素上设置高度:100% 不起作用
【发布时间】:2015-06-03 23:27:17
【问题描述】:

我尝试在标签中设置height: 100%;,但没有成功。为什么不呢?

.field label {
    color:#3E3E3E;
    font-weight:bold;
    width:80px;
    display:block;
    float:left;
    margin-top:5px;
    margin-left:3px;
    height:100%; /* <-- doesn't work */
}
.field {
    display:block;
    margin-bottom:9px;
    background:none;
    border:none;
}
<div class="field large">
    <label>Textarea</label>
    <textarea></textarea>
</div>

【问题讨论】:

    标签: css


    【解决方案1】:

    您将高度设置为 100%,但 100% 是什么?它始终是该元素的父元素,那么父元素的高度设置为多少?如果它没有被设置为任何东西,那么浏览器就没有可参考的东西。

    【讨论】:

    • 所以当父母的高度是自动时,标签没有办法保持与父母相同的高度吗?我试过“继承”……但还是一样。
    • 你期望父母的身高会改变吗?即使它是“自动”的,计算的高度也会是一些像素,只要这个值是恒定的,只需将标签设置为相同的高度就可以了。
    • “计算”并不是我真正想要的技术术语......“解决”也许?我必须检查 CSS 文档。
    • 啊,“使用价值”就是我的意思:w3.org/TR/CSS21/cascade.html#used-value
    • 100% 的家长就是这样
    【解决方案2】:

    在这种情况下,我相信您的 div 的高度是由其中最高元素的高度决定的:文本区域。 (Reference) 也许你想知道你的文本区域有多少像素高(例如这可以用 Firebug、IE 或 Chrome 的开发者工具来完成),然后将你的标签设置为相同的高度。

    我还明确设置了文本区域的高度,以确保它在所有浏览器中都相同。


    height: 100% 未按预期工作的原因是父元素的高度为auto。这会导致您的标签也得到auto 的计算高度。

    指定百分比高度。该百分比是相对于生成框的包含块的高度计算的。如果没有明确指定包含块的高度(即,它取决于内容高度),并且该元素不是绝对定位的,则该值计算为 'auto'。
    (Reference)

    【讨论】:

    猜你喜欢
    • 2017-02-16
    • 1970-01-01
    • 2015-10-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-11-26
    • 2011-11-15
    • 1970-01-01
    相关资源
    最近更新 更多