title: SAPUI5 Page Footer doesn't show in correct place
body: <p>I have a problem regarding the design of the page. I can't make the header and footer look correctly in all resolutions.
  I have one main App view which handles routing and places the required view to the content. </p>
  
  <pre><code>&lt;mvc:View xmlns:mvc="sap.ui.core.mvc"   xmlns="sap.m" heigh="100%" displayBlock="true"
        controllerName="demo_pcm.App" &gt;
  
  &lt;Page id="productListPage" navButtonPress="onNavBack" showNavButton="true" title="{i18n&gt;products}"&gt;
      &lt;headerContent&gt;
  &lt;IconTabBar
          expanded="false"
          id="idIconTabBar"
          select="handleIconTabBarSelect"
          expandable="false"
          applyContentPadding="false"
          headerMode="Inline"
          visible="{viewModel&gt;/visible}"
         &gt;
      &lt;items&gt;
          &lt;IconTabFilter
  
                  icon="sap-icon://begin"
                  iconColor="Neutral"
                  design="Horizontal"
                  text="STEP1"
                  key="STEP1" /&gt;
          &lt;IconTabSeparator icon="sap-icon://open-command-field" /&gt;
          &lt;IconTabFilter
                  icon="sap-icon://survey"
                  iconColor="Neutral"
                  design="Horizontal"
                  text="STEP2"
                  key="STEP2"
          /&gt;
  
  
      &lt;/items&gt;
  &lt;/IconTabBar&gt;&lt;/headerContent&gt;
  
      &lt;content &gt;
  &lt;App id="app" &gt;
      &lt;!-- pages will be filled automatically via routing --&gt;
  &lt;/App&gt;
      &lt;/content&gt;
  &lt;/Page&gt;
  </code></pre>
  
  <p></p>
  
  <p>Based on the URL, i am inserting other views to the app itself. Here my design problem comes.If i use header content and place the icontabbar there (this icontabbar should repeat on each subview that is why i placed inside the app.view)
  Here how it looks;
  <a href="https://i.stack.imgur.com/YLdTV.png" rel="nofollow noreferrer">header cannot be seen clearly</a></p>
  
  <p>if i just remove the page control or don't use  in the app.view and just place the icontab bar itself right above to  control, it works fine. I want my icontabbar to stick header always that is why i tried to include in the header content.
  Another problem is with the footer.
  After i load my first first view from the router , i can't see my footer if i don't scroll down. I need to scroll down to see or set the view height to 90%.
  That is how it looks; 
  <a href="https://i.stack.imgur.com/tydrl.png" rel="nofollow noreferrer">missing footer</a></p>
  
  <p>in the image you will see another scrollbar on the right, it is due to page vibration (Somehow it was shaking in chrome and i put below code to the css)</p>
  
  <pre><code>html{ overflow-y: scroll;}
  </code></pre>
  
  <p>from the app.view if i insert scroll container and set the height to 90%, it works fine but it goes higher position on higher resolutions.(so in a 4k resolution it looks very weird)</p>
  
  <pre><code>  &lt;ScrollContainer
          height="90%"
          width="100%"
          horizontal="false"
          vertical="true"&gt;
  &lt;App id="app" &gt;
      &lt;!-- pages will be filled automatically via routing --&gt;
  &lt;/App&gt;
  &lt;/ScrollContainer&gt;
  </code></pre>
  
  <p>and here is how it looks now (without  in app.view and scroll container with height 90% (footer can be seen but you can see white line at the bottom, it becomes bigger on higher resolutions)
  (stackoverflow doesn't allow me to post 3 links :/)</p>
  
  <p>Here is my index.html</p>
  
  <pre><code> &lt;script&gt;
      sap.ui.localResources("demo_pcm");
      sap.ui.localResources("util");
      sap.ui.localResources("i18n");
      var oModel = "";
      sap.ui.getCore().attachInit(function() {
          sap.ui.require([
              "sap/m/Shell",
              "sap/ui/core/ComponentContainer",
              "demo_pcm/Component"
          ], function(Shell, ComponentContainer, Component) {
  
                  app: new ComponentContainer({
                      height:"100%",
                      component: new Component({
                          id: "mvcAppComponent"
                      })
                  }).placeAt("content");
          }); });
  
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p></p>
  
  <p></p>
  
  <p>where can be the problem ? I am very near to loosing my mind. I tried floating footer but same problem. Should i include my scroll container in the subview itself before the footer ?</p>