javascript - 我们可以在 css 中使用百分比高度吗？

Question

我正在使用 5 个带有悬停效果的横幅图片并使用以下代码

#banner
{
    float:left;
    width:99.025%;
    padding:0 0 0 10px;
    margin:0;
    height: 16.714em; /* 234px*/
    position:relative;
    overflow:hidden;
    display:block;
    background:url('/pages/images/bottom_wood_repeater.jpg') 0 104px repeat-x;
}

#banner img
{
    float:left;
    width:19.435%; /*197px;*/
}

#banner a img
{
    float:left;
    display:block;
}

#banner a:hover img
{
    float:left;
    position:relative;
    top:-16.714em; /* 234px*/
}   

我可以使用百分比而不是 em 来表示高度吗？

height: 16.714em; /* 234px*/

实际上，我正在创建响应式设计，它为较小的分辨率或移动设备带来了问题。

当前站点:http://new.brandonplanning.com/home

提前致谢:)

Answer 1

是也不是。

具体来说，如果父元素没有固定高度，您可以不这样做。想一想:如果一个元素的高度可以等于其父元素高度的百分比，那么需要先计算父元素的高度。但是要计算父项的高度，首先需要计算其子项的高度。但是在你计算这个 child 的高度之前，你需要计算 parent 的高度。你知道这是怎么回事。

如果 parent 确实有固定的高度，那么 child 的高度百分比就可以了。

如果父级没有固定高度，而您为子级设置了百分比高度，浏览器将简单地放弃并将子级视为具有height: auto .