股利。结合使用前和固定尺寸

Is it possible? div "menu" and "submenu" needs to be 50px tall. "top" and "bottom" needs to be 60% and 40%. The behinde-the-scene-calculation would be 60% - 50px for "top".

可能吗? div“menu”和“submenu”需要高50px。 “顶部”和“底部”需要为60%和40%。对于“顶部”,behinde-the-scene计算将是60% - 50px。

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

2 个解决方案

#1

CSS doesn't mix units to let you say 60% - 50px -- to achieve something like this effect, you'd have to resort to JavaScript to compute the sizes.

CSS不会混合单位让你说60% - 50px - 来实现类似这样的效果,你不得不求助于JavaScript来计算尺寸。

If your div's are directly inside , you won't have to re-implement too much of a layout engine -- at document load, get the viewport size, then compute what 60% - 50px is in pixels and assign that as the #top element height, and similarly for #bottom.

如果您的div直接位于内部,则不必重新实现太多的布局引擎 - 在文档加载时,获取视口大小,然后计算60% - 50px以像素为单位并将其指定为#top元素高度,同样适用于#bottom。

#2

As you asking if you can do this? Because yes, you can

当你问你是否可以这样做?因为是的,你可以

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

What would happen is both menus would be 50px, and then the top and bottom would take 60 and 40% of the page. Most likely you would have scrollbars because the page would be 100px over 100% of the page, but it is very possible.

会发生什么是两个菜单都是50px,然后顶部和底部将占用页面的60%和40%。很可能你会有滚动条,因为页面将超过100%的页面100px,但它很可能。

You can mix percentages, pixels, and ems.

您可以混合百分比,像素和ems。

#1