Question

我有这样的布局，

<html>
    <body>
        <div class = 'parent'>
            <div class = 'header'></div>
            <div class = 'child'></div>
            <div class = 'footer'></div>
        </div>
    <body>
<html>

子内容是可变的，高度可能是300px或800px。假设视口为600px，标题和页脚为50px。

A：我要求父级高度为600px，即子级为300px且页脚被推到页面底部时的视口高度。

B：我要求父级高度为900px ( Header + Child + Footer )，当孩子为800px

时，内容会变为可滚动

我可以通过多种方式分别完成A和B，但无法想出一种方法将两者结合起来。

要执行 A：

html, body {
    height : 100%
}

.parent {
    height : 100%;
    display : flex;
}

.header { 
    height : 50px;
}

.child {
    flex-grow : 1;
}

.footer {
    height : 50px;
}

要做 B：

.header {
    height : 50px;
}

.footer {
    height : 50px;
}

视口的高度和孩子的可变高度仅用于澄清问题，在我的情况下，我想支持所有视口高度和任何儿童身高。

Javascript解决方案，使用方法 B :(我必须使用css）

var parent = document.getElementsByClassName('parent')[0];
if(parent.clientHeight < window.innerHeight) {
    parent.style.height = window.innerHeight;
}

Answer 1

听起来你正试图创造一个粘性的页脚，即一个粘贴的＃00;＆＃34;当没有足够的内容来填充视口时，在视口的底部。

为此，你错过了两件事。首先，您的.parent元素需要flex-direction: column;（row是默认值），其次，它需要min-height: 100vh;。 vh单位is supported in all current browsers。

在下面的示例中，我已经在展开的<summary> / <details>框中抛出，以证明其有效。

＆＃13;

html, body {
  margin: 0;
}

.parent {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.header {
  height: 50px;
  background-color: blue;
}

.child {
  flex-grow: 1;
}

.footer {
  height: 50px;
  background-color: red;
}

p { font-size: 32px; }

＆＃13;

<div class='parent'>
  <div class='header'></div>
  <div class='child'>
    <details>
      <summary>Expand</summary>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum, sem quis viverra fermentum, velit libero vestibulum quam, in consectetur purus massa vel velit. Cras interdum massa lobortis diam malesuada posuere. Nunc sollicitudin massa at erat tristique iaculis. Mauris lacinia facilisis pulvinar. Donec congue sodales risus, vel fermentum urna ullamcorper in. Aenean a posuere augue. Cras a viverra arcu. Ut a lobortis mauris. Proin ac rutrum erat. Duis at tempus risus, id maximus magna. Maecenas tempor commodo lacus sed rhoncus. In scelerisque sem interdum elit sagittis sodales ut id elit. Curabitur porta, quam vitae iaculis rhoncus, metus ante commodo quam, vitae dictum lectus ex sed orci.</p>
    </details>
  </div>
  <div class='footer'></div>
</div>

＆＃13;

Answer 2

只需给父母一个min-height: 100vh;：

body {
  margin: 0;
}

.parent {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-content: stretch;
}

.child {
  background-color: green;
  flex-grow: 1;
}

.header,
.footer {
  flex-grow: 0;
  background-color: red;
}

<div class='parent'>
  <div class='header'>Header</div>
  <div class='child'>
    <p>a line</p>
    <p>a line</p>
    <p>a line</p>
    <p>a line</p>
    <p>a line</p>
    <p>a line</p>
    <p>a line</p>
    <p>a line</p>
    <p>a line</p>
    <p>a line</p>
    <p>a line</p>
    <p>a line</p>
    <p>a line</p>
    <p>a line</p>
    <p>a line</p>
    <p>a line</p>
  </div>
  <div class='footer'>Footer</div>
</div>

Answer 3

AVAVT的答案是正确的，如果有人不想使用vh，我也会发布此答案，因为目前兼容性很差。

html, body {
    height : 100%
}

.parent {
    min-height : 100%;
    display : flex;
    flex-direction : column;
}

.header { 
    height : 50px;
}

.child {
    flex-grow : 1;
}

.footer {
    height : 50px;
}

如何将父高度设置为子高度或视口高度取决于哪个更大？

3 个答案: