如何让柔性物品的孩子填充父母身高的100％？

我有一个带有标题（需要占用整个页面高度的20％）的简单页面和我想填充剩余页面高度（80％）的容器。如何让柔性物品的孩子填充父母身高的100％？

问题是，我希望容器的每个孩子都是容器高度的100％（因此容器需要扩大到实际占总页面高度的80％）*有多少孩子在那里。

是否有可能利用Flexbox，就使容器盛装多种元素其中的每一个容器的总高度？

我不知道如何让一个元素同时填补剩余的空间，然后使用它作为一个指标

无论如何，这里是一个codepen demo - 简单的html和d css如下：我的理想结果是，每个有色divs将是body的整个高度减去header高度，并且容器将扩展以容纳物品。

任何想法将不胜感激。

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
body { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
header { 
 
    background: blue; 
 
    flex: 1; 
 
} 
 
div.holder { 
 
    flex: 5; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
div.one { 
 
    flex: 1; 
 
    background: green; 
 
} 
 

 
div.two { 
 
    flex: 1; 
 
    background: yellow; 
 
} 
 

 
div.three { 
 
    flex: 1; 
 
    background: red; 
 
} 
 

 
div.four { 
 
    flex: 1; 
 
    background: orange; 
 
}

<body> 
 
    <header> 
 
    </header> 
 
    <div class="holder"> 
 
    <div class="one"> 
 
     one 
 
    </div> 
 
    <div class="two"> 
 
     two 
 
    </div> 
 
    <div class="three"> 
 
     three 
 
    </div> 
 
    <div class="four"> 
 
     four 
 
    </div> 
 
    </div> 
 
</body>

来源

2017-02-27 Startec

http://stackoverflow.com/q/33636796/3597276 –

DEMO

CSS

html, body { 
    height: 100%; 
    margin: 0; 
} 

header { 
    background: blue; 
    height:20% 
} 

div.holder { 
    height:80%; /* <------ make it of desired height */ 
    display: flex; 
    flex-direction: column; 
    align-items: stretch; 
} 

div.holder > div { 
    min-height: 100%; /* <------ better to provide min-height */ 
} 

div.one { 
    flex: 1; 
    background: green; 
} 

div.two { 
    flex: 1; 
    background: yellow; 
} 

div.three { 
    flex: 1; 
    background: red; 
} 

div.four { 
    flex: 1; 
    background: orange; 
}

HTML

<body> 
    <header></header> 
    <div class="holder"> 
    <div class="one">one</div> 
    <div class="two">two</div> 
    <div class="three">three</div> 
    <div class="four">four</div> 
    </div> 
</body>

来源

2017-02-27 02:32:33 4dgaurav

你真的需要Flexbox的？
为什么不简单使用视口值（vw，vh）？

html, body { 
 
    margin: 0; 
 
} 
 
header { 
 
    background: blue; 
 
    height: 20vh; 
 
} 
 
div.holder { 
 
    height: 80vh; 
 
} 
 

 
div.one { 
 
    background: green; 
 
    height: 100%; 
 
} 
 

 
div.two { 
 
    background: yellow; 
 
    height: 100%; 
 
} 
 

 
div.three { 
 
    background: red; 
 
    height: 100%; 
 
} 
 

 
div.four { 
 
    background: orange; 
 
    height: 100%; 
 
}

<body> 
 
    <header> 
 
    </header> 
 
    <div class="holder"> 
 
    <div class="one"> 
 
     one 
 
    </div> 
 
    <div class="two"> 
 
     two 
 
    </div> 
 
    <div class="three"> 
 
     three 
 
    </div> 
 
    <div class="four"> 
 
     four 
 
    </div> 
 
    </div> 
 
</body>

或者你可以用百分比值去，这几乎是相同的。（但体和HTML需要有100％的高度）

html, body { height: 100%; } 
header { height: 20%; } 
.holder { height: 80%; } 
.holder > div { height: 100%; }

来源

2017-02-27 01:56:34 pol

如何让柔性物品的孩子填充父母身高的100％？

回答

相关问题