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

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 。

答：我要求父级高度变为600px即子级为300px并将页脚推到页面底部时的视口高度。

B：我要求父级高度变为900px ( Header + Child + Footer )并且当子级为800px时内容必须可滚动

我可以通过多种方式分别完成A和B，但是无法提出将两者结合的方式。

做一个：

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

听起来好像您正在尝试创建粘性页脚，即，当没有足够的内容填充视口时，该“页脚”会“粘贴”到视口的底部。

为此，您缺少两件事。 首先，您的.parent元素需要flex-direction: column; （默认为row ），其次，它需要min-height: 100vh; 。 当前所有浏览器均支持 vh单元。

在下面的示例中，我抛出了一个扩展的<summary> / <details>框，只是为了演示它的工作原理。

 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; }

 <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>

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 个解决方案

解决方案1
2 已采纳 2017-02-22 15:52:04

解决方案2
1 2017-02-22 15:41:55

解决方案3
0 2017-02-22 15:50:54

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

问题描述

3 个解决方案

解决方案1 2 已采纳 2017-02-22 15:52:04

解决方案2 1 2017-02-22 15:41:55

解决方案3 0 2017-02-22 15:50:54

解决方案1
2 已采纳 2017-02-22 15:52:04

解决方案2
1 2017-02-22 15:41:55

解决方案3
0 2017-02-22 15:50:54