Question

我正在尝试创建一个单页面网站，这个网站运行良好。我有三个部分需要全屏，这是有效的。但是当我将窗口调整为500px宽度并使高度也更短时，第一页上的标题出现在第一页上。第三页上的标题也是如此，第一页上显示了这个标题。

以下是codepen：http://codepen.io/anon/pen/jWaxMK

HTML：

html,
    body,main {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    section {
        position: relative;
        width: 100%;
        height: 100%;
        color: #ececec;
        text-align: center;
        display: flex; /* default: row nowrap */
        flex-flow:row wrap;
        justify-content: center;
        align-items: center;
        align-content: center;
    }
    section:nth-child(1) {
        background: #06a2cb;
    }
    section:nth-child(2) {
        background: #ececec;
    }
    section:nth-child(3) {
        background: #F5E5D8;
    }
    h2{
        margin-top:0;
      font-family: 'Lobster';
        margin: 1em;
        flex: 0 0 100%;
      color: black;

    }
    .box{
        width: 250px;
        height: 250px;
        display: inline-block;
        background-color: #ececec;
        border-radius: 10px;
        flex: 0 0 250px;
    }
    .circle{
        border-radius: 50%;
        background-color: white;
 }

CSS：

{{1}}

感谢任何帮助，谢谢！

Answer 1

您可以通过将所有section元素设为弹性项目并为其提供最小高度来解决问题。

将此添加到您的CSS：

body {
  display: flex;
  flex-direction: column;
}

section {
  min-height: 100%; /* alternatively, try `min-height: 100vh` */
  flex-shrink: 0;
}

Revised Codepen

防止flexbox项目溢出到兄弟姐妹

1 个答案: