角材料圣杯flexbox布局

我正在使用角材料的webkit，并且我总是根据设备设置容器的高度问题。我遇到的问题是子元素“离开”中间容器并在页脚区域进行渲染。在图像上，编号1显示了绿色区域的内容足够小以适应设备高度的情况。数2显示了我的问题，3是我的理想布局：角材料圣杯flexbox布局

我的布局是这样的：

<body layout="column"> 
    <div> header </div> 
    <div layout="row" flex"> 
    <md-sidenav md-is-locked-open="true" flex="20"></md-sidenav> 
    <div layout="column" flex ui-view></div> 
    <md-sidenav class="md-sidenav-right" md-is-locked-open="true" flex="20"></md-sidenav> 
    </div> 
    <div class=footer"></div> 
</body>

我找不到对角材料文档解决方案 - 也许我不明白一些想法，但这是我试图实现这种布局的第二天，我仍然失败。

来源

2016-09-25 Konrad Janczyk

我觉得这是最好的，你可以使用Flex做 - CodePen

标记

<div id="all" ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout="column" flex> 
    <div style="background:red; height:100px"></div> 
    <div layout="row" flex="90"> 
    <div style="background:blue" flex="10"></div> 
    <div layout="column" flex="80"> 
     <div > 
      <!-- content --> 
     </div> 
     <div style="background:yellow; height:100px"></div> 
    </div> 
    <div style="background:blue" flex="10"></div> 
    </div> 
</div>

来源

2016-09-25 14:39:56

感谢您的帮助！不幸的是，这不是我想要做的。我不希望内容溢出，我希望容器获得更高的高度，以便页脚位于内容和导航栏下方。我不想在内容中固定页脚或内部滚动。要100％清楚 - 在你的codepen中，当你删除溢出时，页脚位于中间 - 我想在底端 –

@KonradJanczyk - 查看更新。我认为你将不得不为页眉和页脚定义高度，但这不是问题，因为你可能希望它们被修复。 –

谢谢！以为我可以用更“干净”的方式做到这一点，但这应该做 –

角材料圣杯flexbox布局

回答

相关问题