HTML container exceeds window height

I am using kendo ui and boostrap v3.

I have a container for my top menu and a container for my main content (id=splitter).

Window height equals 981px, but instead of dividing up the height for both containers, the main content reserves 981px and the top menu 53px, which sums up to 1014px.

But there should be the following allocation -> 53px for top menu and 928px for the main content. I do not know how to do that.

I already tried to calculate the height with "calc(100% - 53px)", but that doesn't work.

This is my html structure:

<div id="wms-app" style="height: 100%;">
    <div style="height: 100%;">
        <div id="wms-content" style="height: 100%;">
            <div id="mainmenu" class="k-content"></div>
            <div id="splitter" class="k-content" style="height: 100%;"> 
            </div>
        </div>
    </div>
</div>

Solution:

In the end it also worked with the calc(..) option:

#splitter {style="height: calc(100% - 53px);"}

I forgot to reload everything because kendo framework recalculates the splitter heights after page has been loaded.

As you might already know:

100% height sets an element to take up every available pixel of height, so the behaviour is correct.

Depending on what end result and method you favor, I see three solutions:

One solution is to set the topmenu to

position: fixed;
top: 0;

That should make the menu flow above the 100% content. You will then need to position content inside the div in a way that accounts for the menu.

Second solution is to set the topmenu to position:absolute, which should also take it out of the flow, but stay in place when you scroll.

A third solution is something like this, which should work but that I haven't tested for myself.

#topmenu
{
    height: 53px;
}
div
{
    height: 100%;
    margin-bottom: -53px;
}