http://plnkr.co/edit/5IE41TtnWHpjLZqzRidk
where i'm using the angular kendo splitter, and i have the height set to 100% and it's just entirely collapsed. If i remove the height style, it shows fine, but just not with the height filled out. What am i missing here to make sure the splitter fills out the entire height of the page? Thank you for your help!
5 Answers, 1 is accepted
In CSS, a percentage-based height property works if the parent element has height. Therefore, the controller div, and the body and the html need to have a 100% height, too. Here is the forked plunkr that shows this.
Regards,Alex Gyoshev
Telerik
Rank 1
I am, however, stuck with one other problem though. I'm using a horizontal splitter, and a lot of the content in one of my panes spills over vertically. The scrollbar for the splitter shows up fine, but unfortunately so does the one for the browser/page. It's only a little bit, but i can't figure out a way to make sure only 1 scrollbar shows. I haven't been able to come up with a test plunkr that shows this yet, but I was hoping you might have some ideas regardless.
It is likely that some of the elements with 100% height have borders, padding, and/or margins. Any of these will sum up with the 100% height because of the default browser box model, and will make the content more than 100% in height, triggering the scrollbar. You can resolve this by zeroing them out via CSS. Be aware that the html and body tags have default margin / padding. After verifying that all the content is correctly sized, you can set the html/body overflow to hidden, so that the browser scrollbar is never shown.
Regards,Alex Gyoshev
Telerik
Rank 1
<body>
<header></header>
<div></div>
<footer></footer>
</body>
my splitter is in the 'div' section, and what happens is that when the splitter height is set to '100%', it acts as if the header and footer don't exist. the second scrollbar is there because of the header and footer, and it won't go away unless you remove those 2 objects.
Is there a way around this issue?
There are several ways around this problem, depending on the browser support that you want to achieve. Here are two:
- To achieve maximum compatibility (think IE7, etc), you can size the <div> with JavaScript, getting the page height and removing the height of the header and footer, i.e.
$("body>div").height($("body").outerHeight()
- $("header").outerHeight()
- $("footer").outerHeight()
);
Make sure to execute this on window.resize, too. - If you are OK with supporting IE9 and newer, you can use the CSS calc property (see its browser support), setting the following:
body>div {
/* change 100px to the combined height of header and footer */
height: calc(100% - 100px);
}
Alex Gyoshev
Telerik