创建具有固定头，固定侧边栏角

问题描述：

采用了棱角分明材质/ 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也可以。

我会建议使用绝对定位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

这是选择的解决方案。结果非常接近理想。 –

答

此发现角材质文档网站（你问过相同的功能之一）的源代码是你在找什么对于

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>

该解决方案无法按预期工作，根据需要，工具栏不会保持最佳状态。 –

答

你可以试试这个代码

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

此解决方案未达到预期结果。 –

创建具有固定头，固定侧边栏角

相关推荐