Div. Combine precentage and fixed size.

Question

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 id="menu"></div>
<div id="top">
</div>
<div id="submenu"></div>    
<div id="bottom">
</div>

Answer 1

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.

You can mix percentages, pixels, and ems.

Answer 2

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.

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.