創建具有固定頭，固定側邊欄角

採用了棱角分明材質/ Flex的佈局和佈局，固定內容部分，我使用Angular瓦特/ Angular Material Flex Layout 創建具有固定頭，固定側邊欄角

我試圖創建一個Web應用程序佈局這完全像this site。注意固定標題，固定側邊欄，固定內容疼痛。沒有使用瀏覽器滾動，只有div滾動，完全符合瀏覽器視口。

這裏是我用給我的基本結構HTML：

<md-toolbar color="primary"> 
    <span>Application Title</span> 
</md-toolbar> 
    <md-sidenav-container> 
    <md-sidenav mode="side" opened="true">Drawer content</md-sidenav> 
    <div class="my-content">Main content</div> 
    </md-sidenav-container>

此外，我設置以下樣式：

html, body { 
     margin: 0; 
     width: 100%; 
     height: 100%; 
     overflow: hidden; 
    } 
md-sidenav-container, .main-content { 
    margin: 0; 
    width: 100%; 
    height: 100%; 
}

我注意到，與網頁上沒有工具欄一切正常。所以然後我添加了一個填充底部：64px;到md-sidenav-container，.main-content類。它似乎是固定的內容，但不是sidenav。 sidenav滾動條仍然在瀏覽器窗口下方。

如果有人可以告訴我如何使用flex指令來做到這一點，那麼我的flex-layout會安裝到我的Angular應用程序中。否則，普通的CSS也可以。

來源

2017-04-23 Blake Rivell

我會建議使用絕對定位sidenav與相對於裏面放置一個div。然後溢出滾動/自動相對格。這可以幫助您避免高度不匹配問題。 – rjustin

你有一個工作的例子嗎？我也這麼認爲它是一個錯誤的容器溢出問題......但我需要看到並測試它... – ToTaTaRi

您可以在https://angular-material2-issue-dgcx3j.stackblitz.io/

檢查工作例如它並不像你所要求的完全一樣（它有額外的功能）。側邊欄固定在大屏幕上，在小屏幕上作出響應，並在工具欄上顯示菜單按鈕。

，您可以查看在https://stackblitz.com/edit/angular-material2-issue-dgcx3j?file=app%2Fapp.component.ts

代碼您也可以在https://github.com/angular/material.angular.io

來源

2017-10-24 07:09:22

這是選擇的解決方案。結果非常接近理想。 –

此發現角材質文檔網站（你問過相同的功能之一）的源代碼是你在找什麼對於

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
mat-sidenav-container { 
 
    width: 100%; 
 
    height: calc(100% - 64px); 
 
}

<md-toolbar color="primary"> 
 
    <span>Application Title</span> 
 
</md-toolbar> 
 
<md-sidenav-container> 
 
    <md-sidenav mode="side" opened="true">Drawer content</md-sidenav> 
 
    <div class="my-content"> 
 
    <router-outlet></router-outlet> 
 
    </div> 
 
</md-sidenav-container>

來源

2017-10-24 09:10:37 ShadowFoOrm

該解決方案無法按預期工作，根據需要，工具欄不會保持最佳狀態。 –

你可以試試這個代碼

HTML

<md-toolbar color="primary"> 
    <span>Application Title</span> 
</md-toolbar> 

<md-sidenav-container class="example-container"> 
    <md-sidenav #sidenav class="example-sidenav" opened="true"> 
    Jolly good! 
    </md-sidenav> 

    <div class="example-sidenav-content"> 
    <div class="my-content">Main content</div> 
    </div> 

</md-sidenav-container>

CSS

.example-container { 
    width: 500px; 
    height: 300px; 
    border: 1px solid rgba(0, 0, 0, 0.5); 
} 

.example-sidenav-content { 
    display: flex; 
    height: 100%; 
    align-items: center; 
    justify-content: center; 
} 

.example-sidenav { 
    padding: 20px; 
} 

.my-content{ 
    height:1200px; 
}

和繼承人的Plunker鏈接：https://plnkr.co/edit/YFGQdVcNnIhMK0GzZ25Z?p=preview

來源

2017-10-25 03:30:17 i3lai3la

此解決方案未達到預期結果。 –

創建具有固定頭，固定側邊欄角

回答

相關問題