Question

澄清：这不会复制Chrome / Safari not filling 100% height of flex parent

上的问题

我的问题与容器没有拉伸内容有关。否则容器伸展得很好，没有内容。问题是当我真正开始将内容倒入容器中以增加其高度时。

＆＃34; main＆＃34;元素应该是内容延伸，但它目前没有这样做。我的代码如下：

＆＃13;

html, body {
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}
header, footer {
    height: 40px;
    background: #fafafa;
    display: block;
}
#page-wrapper {
    display: flex;
    flex-direction: column;
    background: lightpink;
    min-height: 100%;
}
main {
    display: flex;
    background: darkred;
    flex: 1;
    flex-direction: row;
}
#reader {
    flex: 1;
    background: orange;
}
#splitcontent {
    background: lightblue;
    width: 200px;
}

＆＃13;

<div id="page-wrapper">
    <header>header</header>
    <main id="content">
        <article id="reader">
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
        </article>
        <article id="splitcontent">
        </article>
    </main>
    <footer>footer</footer>
</div>

＆＃13;

Answer 1

添加：

#page-wrapper {
    height:auto;
    min-height: 100%;
}

＆＃13;

html,
body {
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}
header,
footer {
  height: 40px;
  background: #fafafa;
  display: block;
}
#page-wrapper {
  display: flex;
  flex-direction: column;
  background: lightpink;
  height: auto;
  min-height: 100%;
}
main {
  display: flex;
  background: darkred;
  flex: 1;
  flex-direction: row;
}
#reader {
  flex: 1;
  background: orange;
}
#splitcontent {
  background: lightblue;
  width: 200px;
}

＆＃13;

<html>

<head>
</head>

<body>
  <div id="page-wrapper">
    <header>header</header>
    <main id="content">
      <article id="reader">
        <p>test
        </p>
        <p>test
        </p>
        <p>test
        </p>
        <p>test
        </p>
        <p>test
        </p>
        <p>test
        </p>
        <p>test
        </p>
        <p>test
        </p>
        <p>test
        </p>
        <p>test
        </p>
        <p>test
        </p>
        <p>test
        </p>
        <p>test
        </p>
        <p>test
        </p>
        <p>test
        </p>
      </article>
      <article id="splitcontent">
      </article>
    </main>
    <footer>footer</footer>
  </div>
</body>

</html>

＆＃13;

Answer 2

另一次更改/编辑：

将height 100%更改为min-height: 100%中的page-wrapper（height 100%可防止身高增长），并从flex: 1中移除main

html, body {
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}
header, footer {
    height: 40px;
    background: #fafafa;
    display: block;
}
#page-wrapper {
    display: flex;
    flex-direction: column;
    background: lightpink;
    min-height: 100%;
}
main {
    display: flex;
    background: darkred;
    flex-direction: row;
}
#reader {
    flex: 1;
    background: orange;
}
#splitcontent {
    background: lightblue;
    width: 200px;
}

<div id="page-wrapper">
    <header>header</header>
    <main id="content">
      <article id="reader">
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
      </article>
      <article id="splitcontent">
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
      </article>
    </main>
    <footer>footer</footer>
</div>

适用于Chrome。

flex：1不是在Chrome中拉伸包含内容的容器

2 个答案: