0

I am using kendo ui and boostrap v3.

enter image description here

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.

amphetamachine
  • 27,620
  • 12
  • 60
  • 72
Matthias Reisner
  • 581
  • 1
  • 6
  • 25
  • can you add a link to your page so I can inspect css or provide me with css styles for wms-app, wms-content, mainmenu, k-content and splitter? – Andrew Hendrie Mar 04 '15 at 08:56
  • Sorry to be contradictory, but just to counter OhHendrie; usually, posting directl inks to one's site isn't really preferred for Stack Overflow questions. If the site goes down a year from now, some kendo debugger will get no use out of a Google search that takes them to this page. If you can reproduce the issue in a small in-question sample, go for that, otherwise just post as much code as you feel could be relevant. – Katana314 Mar 04 '15 at 14:39

2 Answers2

1

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;
}
xiix
  • 162
  • 9
0

I think what you'd like to do is along the lines of this concept (correct me if I'm wrong).

https://css-tricks.com/snippets/css/sticky-footer/

http://ryanfait.com/sticky-footer/

Hope this helps!

Andrew Hendrie
  • 6,205
  • 4
  • 40
  • 71