CSS flexbox布局在Safari中不起作用

Posted

技术标签:

【中文标题】CSS flexbox布局在Safari中不起作用【英文标题】：CSS flexbox layout not working in safari 【发布时间】：2015-10-30 04:43:02 【问题描述】：

尝试使用 angular material 实现 flexbox 布局，其中导航和页脚具有固定高度，内容将是可滚动的（使用 md-content）并且页脚应该出现在可滚动内容之后。我的解决方案在 chrome 和 firefox 中运行良好，但在 safari 中不行。在 safari 中，页脚出现在视口底部，与可滚动内容重叠。有什么办法可以在所有浏览器中达到同样的效果？

html:

<!DOCTYPE html>
<html>

  <head>

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic" />

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>

    <link rel="stylesheet" href="style.css" />

  </head>

  <body layout='column'>

    <div id='nav'>
      Nav
    </div>

    <md-content flex layout='column'>

      <div id='content' flex>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>

      <div id='footer'>
        Footer
      </div>

    </md-content>

  </body>

</html>

css:

* 
  margin: 0;


body 
  overflow: hidden;
  max-width: 100%;
  max-height: 100%;


#nav
  background-color: green;
  -webkit-flex: 0 0 65px;
  flex: 0 0 65px;


#content
  background-color: blue;


#footer
  background-color: red;
  -webkit-flex: 0 0 115px;
  flex: 0 0 115px;

plunkr：

http://plnkr.co/edit/ibi6v1LTy9dLducHuMdM

【问题讨论】：

【参考方案1】： 
#content 
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;

足够了。

【讨论】：

【参考方案2】：

您的层次结构有点不稳定，看来 Safari 正在为此苦苦挣扎。

通过将页脚移动为 #nav 和 md-content 元素的同级元素，并删除多余的 flex 显示，您可以获得所需的布局。

新的 HTML：

<div id="nav">
      Nav
    </div>
<md-content layout="column">
  <div id="content">
    <p>...</p>
    ...
    <p>...</p>
  </div>
</md-content>
<div id="footer">
  Footer
</div>

新的 CSS：

#content
  background-color: blue;
  -webkit-flex: 1 1;
  flex: 1 1;

Plunkr Example

【讨论】：

我需要一个粘性页脚，而不是固定的。不过谢谢 粘在内容之后？所以把它放在内容中，完全避免元素上的 flex。您不需要为此使用柔性显示器。这是一个示例：plnkr.co/edit/M4KeFHNTyumbd5H6s7bg?p=preview 是这样，但是当内容不滚动时，页脚应该出现在视图高度的底部。像这样：https://css-tricks.com/snippets/css/sticky-footer/。我无法让它在 md-content 中工作。

以上是关于CSS flexbox布局在Safari中不起作用的主要内容，如果未能解决你的问题，请参考以下文章

为啥我的 Flexbox 粘滞页脚在 Safari 中不起作用？

嵌套的 Flexbox 100% 高度在 Safari 中不起作用 [重复]

Flexbox 中心在 Safari 中不起作用

为啥 flexbox 代码在 Safari 5 和 6 中不起作用？

为什么简单的flexbox居中代码在Safari 5和6中不起作用？

CSS calc 在 Safari 和回退中不起作用