Is it possible to set height for the scroller to be a percentage instead of hard coded pixels or ems? There are so many screen sizes that using a percentage for height makes it easy to adapt for different sizes without having to manually get the window height, and then do a conversion on the height I want and apply it.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/Custom/GeneralStyles.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
<title>KonnexMe</title>
</head>
<body>
<!--Main View-->
<div data-role="view" data-layout="layout" id="viewHome">
<div class="flex">
<div>
<div data-role="scroller"
style="height: 320px; width: 98%; margin-left: .3em; box-shadow: 5px 5px 10px #888888; overflow-x:hidden !important;">
<ul id="notesHome"
data-role="listview"
data-type="group"
data-fixed-headers="true">
<li>
Notes
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</li>
</ul>
</div>
</div>
<div>
<div data-role="scroller"
style="height: 320px; width: 98%; box-shadow: 5px 5px 10px #888888;">
<div>
<ul id="tasksHome"
data-role="listview"
data-type="group"
data-fixed-headers="true">
<li>
Tasks
<ul>
<li>Tasks</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="flex">
<div id="activitesHome">
<div data-role="scroller"
style="height: 320px; width: 98%; margin-left: .3em; margin-top: .5em; box-shadow: 5px 5px 10px #888888; overflow-x:hidden !important;">
<div data-role="scheduler"></div>
</div>
</div>
<div>
<div data-role="scroller"
style="height: 320px; width: 98%; margin-top: .5em; box-shadow: 5px 5px 10px #888888;">
<ul id="alertsHome"
data-role="listview"
data-type="group"
data-fixed-headers="true">
<li>
Alerts
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--Main View Drawer-->
<div id="drawerHome"
data-role="drawer"
data-views="['viewHome']">
<ul data-role="listview" data-style="inset">
<li><a>Accounts</a></li>
<li><a>Calendar</a></li>
<li><a>Company</a></li>
<li><a>Correspondence</a></li>
<li><a>Documents</a></li>
<li><a>People</a></li>
<li><a>Reports</a></li>
<li><img src="" style="height: 10em; margin-left: 1.6em;"></li>
<li><a>Change UI Theme</a></li>
<li><a data-transition="none">About</a></li>
<li><a href="/views/Logout.html" data-transition="none" data-target="paneMain">Logout</a></li>
</ul>
</div>
<!--Global Layout-->
<div data-role="layout" data-id="layout">
<header data-role="header">
<div data-role="navbar">
<a data-role="button" data-rel="drawer" href="#drawerHome" data-icon="drawer-button" data-align="left"></a>
<span data-role="view-title">Sample</span>
</div>
</header>
<footer data-role="footer">
<div data-role="tabstrip">
<a data-icon="contacts">Profile</a>
<a data-icon="settings">Settings</a>
</div>
</footer>
</div>
<style>
.flex {
display: flex;
flex-direction: row;
}
.flex > div {
flex: 1 1;
}
</style>
<script>
var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>