SAPUI5ページフッターが正しい場所に表示されない

Question

ページのデザインに関して問題があります。ヘッダーとフッターをすべての解像度で正しく表示させることはできません。 私はルーティングを処理し、コンテンツに必要なビューを配置する1つのメインAppビューを持っています。 URLに基​​づいて

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" heigh="100%" displayBlock="true" 
     controllerName="demo_pcm.App" > 

<Page id="productListPage" navButtonPress="onNavBack" showNavButton="true" title="{i18n>products}"> 
    <headerContent> 
<IconTabBar 
     expanded="false" 
     id="idIconTabBar" 
     select="handleIconTabBarSelect" 
     expandable="false" 
     applyContentPadding="false" 
     headerMode="Inline" 
     visible="{viewModel>/visible}" 
     > 
    <items> 
     <IconTabFilter 

       icon="sap-icon://begin" 
       iconColor="Neutral" 
       design="Horizontal" 
       text="STEP1" 
       key="STEP1" /> 
     <IconTabSeparator icon="sap-icon://open-command-field" /> 
     <IconTabFilter 
       icon="sap-icon://survey" 
       iconColor="Neutral" 
       design="Horizontal" 
       text="STEP2" 
       key="STEP2" 
     /> 


    </items> 
</IconTabBar></headerContent> 

    <content > 
<App id="app" > 
    <!-- pages will be filled automatically via routing --> 
</App> 
    </content> 
</Page> 

、私はアプリ自体に他のビューを挿入しています。ここで私のデザインの問題が起こっています。ヘッダのコンテンツを使用してicontabbarを配置すると（このアイコンタバールは、各サブビューで繰り返されるので、app.view内に配置されます） ここではどのように見えますか？ header cannot be seen clearly

私は単にページコントロールを削除するか、app.viewで使用しないで、コントロールの上にアイコンタブバー自体を置くだけで正常に動作します。私はいつも私がヘッダーの内容に含めることを試みたなぜであるか私のicontabbarがヘッダーをつけてほしいです。 もう1つ問題はフッターです。 ルータから最初の最初のビューを読み込んだ後、スクロールしないとフッターが表示されません。ビューの高さを90％に設定するには、下にスクロールする必要があります。 これは見た目です。あなたは右の別のスクロールバーが表示されます画像でmissing footer

、それはページの振動に起因している（どういうわけか、それはクロムで震えていたと私は、CSSのコードの下に置く）アプリから

html{ overflow-y: scroll;} 

どのようにそれ.view私はスクロールコンテナを挿入し、90％までの高さを設定した場合、それが正常に動作しますが、それはより高い解像度の高い位置になります。（そう4K解像度で、それは非常に奇妙に見える）

<ScrollContainer 
     height="90%" 
     width="100%" 
     horizontal="false" 
     vertical="true"> 
<App id="app" > 
    <!-- pages will be filled automatically via routing --> 
</App> 
</ScrollContainer> 

、ここでは、今見ている（フッタが見えますが、下部に白い線が表示されますが、解像度が高いほど大きくなります） （stackoverflowは3つのリンクを投稿できません：/）

ここでは、私のindex.htmlには問題となる可能性が

<script> 
    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"); 
     }); }); 



</script> 

のですか？私は私の心を失うことに非常に近い。私はフローティングフッタを試しましたが、同じ問題がありました。フッターの前にサブビュー自体にスクロールコンテナを含める必要がありますか？

Answer 1

いくつかのCSS回避策を開いている場合は、次のようなクイックフィックスがあります。 ツールバーの解像度は、解像度ごとに125px（パディングを含む）の固定高さになっているようです。これに応じてAppコンテナの高さを設定することができます。

XML

<App id="app" class="adjustedHeight"> 

CSS

.adjustedHeight{ 
    height: calc(100% - 125px) !important; 
} 

注：これが最善の解決策ではありません。私が良いものを見つけたら、私はこの答えを更新します