CSS flex 布局和侵入页脚问题答案

【问题标题】：CSS flex layout and intruding footer issueCSS flex 布局和侵入页脚问题
【发布时间】：2017-01-18 06:26:03
【问题描述】：

我从 flex（确切地说是 Angular Material 版本）开始了我的冒险，并解决了一个难以解决的问题。基本上我会吃蛋糕并吃蛋糕:)所以我希望我的页脚总是在底部，但在页面很短的小分辨率下，我想避免页脚浮动在主要内容上，而不是为内容。

我的页面标记是这样的：

<body>
   <ui-view layout="column" layout-fill>
       <md-toolbar>top menu</md-toolbar>
       <div class="main-content" layout="row" flex layout-fill>
           <md-sidenav flex="15" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">left menu</md-sidenav>
           <md-content flex>page content</md-content>
       </div>
       <footer>footer</footer>
   </ui-view>
</body>

【问题讨论】：

你应该发布足够的代码来重现问题。

标签： html flexbox angular-material

【解决方案1】：

我理解你对这个解决方案是否正确？ ...当内容超出视口时，它会将页脚向下推，所有页面都会滚动

html, body {
  margin: 0;
}
body {
  display: flex;           /*  IE 11/10 min-height bug fix  */
}
ui-view {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.main-content {
  flex: 1;
  display: flex;
}
md-sidenav {
  background: lightgray;
}
md-content {
  background: lightblue;
  flex: 1;
}

<body>
   <ui-view layout="column" layout-fill>
       <md-toolbar>top menu</md-toolbar>
       <div class="main-content" layout="row" flex layout-fill>
           <md-sidenav flex="15" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">left menu</md-sidenav>
           <md-content flex>
             page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content
         </md-content>
       </div>
       <footer>footer</footer>
   </ui-view>
</body>

或者main-content开始滚动

html, body {
  margin: 0;
}
body {
  display: flex;           /*  IE 11/10 min-height bug fix  */
}
ui-view {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.main-content {
  flex: 1;
  display: flex;
  overflow: auto;
  background: lightgray;
}
md-sidenav {
  width: 120px;
}
md-content {
  background: lightgreen;
  flex: 1;
}
.wrapper {
  background: lightblue;
}

<body>
   <ui-view layout="column" layout-fill>
       <md-toolbar>top menu</md-toolbar>
       <div class="main-content" layout="row" flex layout-fill>
           <md-sidenav flex="15" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">left menu</md-sidenav>
           <md-content flex>
             <div class="wrapper">
             page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content <br> page content 
             </div>
           </md-content>
       </div>
       <footer>footer</footer>
   </ui-view>
</body>

【讨论】：