css - 分区。结合百分比和固定大小

Question

是否可以？div "menu" 和 "submenu" 需要 50px 高。“顶部”和“底部”需要分别为 60% 和 40%。幕后计算将是“顶部”的 60% - 50px。

<div id="menu"></div>
<div id="top">
</div>
<div id="submenu"></div>    
<div id="bottom">
</div>

Answer 1

当你问你是否可以做到这一点？因为是的，你可以

#menu, #submenu{
    height: 50px;
}
#top{
    height: 60%;
}
#bottom{
    height: 40%;
}

会发生的情况是两个菜单都是 50 像素，然后顶部和底部将占据页面的 60% 和 40%。很可能你会有滚动条，因为页面会超过 100% 的页面 100px，但这是很有可能的。

您可以混合使用百分比、像素和 em。

Answer 2

CSS 不会混合单位来让你说 60% - 50px——要实现这样的效果，你必须求助于 JavaScript 来计算大小。

如果您的 div 直接位于 inside ，则您不必重新实现太多的布局引擎 - 在文档加载时，获取视口大小，然后计算 60% - 50px 以像素为单位并将其分配为 #top元素高度，#bottom 也是如此。