这些柔性物品如何占据容器的100％高度.. [英] How these flex item will occupy the 100% height of the container..

问题描述

我希望这些flex项占据此容器的整个空间..

想要user_links部分占据其余高度...



我尝试了什么：



我尝试了flex属性最小高度，高度等。什么都没发生..











这里，用bootstrap写的代码





< header class =section-header>

< div class =row no-gutters>

< div class =col-md-4>

< img src =img / person1.jpgalt =perosnclass =img-fluid img - extra>

< / div>

< div class =col-md-8 bg-danger>

< div class =info>

< div class =d-flex bg-dark align-items-center justify-content-around py-5 text-white>

< h1> Ubaid而且< / h1>



< i class = fab fa-twitter>< / i>



< i class =fab fa-facebook>< / i>



< i class =fab fa-instagram>< / i>



< i class =fab fa-linkedin>< / i>



< i class =fab fa-github>< / i>

< / div>

< div class =user_proffession>

< h4 class =ml-4>前端开发人员< / h4>

< / div>

< sectionclass =user_links>

< div class = d-flex align-content-strech text-center justify-content-around>



< div class =portfolio-item bg-primarystyle =flex：1;>

< i class =fas fa-home fa-2x>< / i>

< h2>主页< / h2>

< / div>



& lt; div class =portfolio-item bg-successstyle =flex：1;>

< i class =fas fa-graduation-cap fa-2x>< ; / i>

< h2>简历< / h2>

< / div>





< div class =portfolio-item bg-warningstyle =flex：1;>

< i class =fas fa-folder-打开fa-2x>< / i>

< h2>文件< / h2>

< / div>





< div class =portfolio-item bg-infostyle =flex：1;>

< i class =fas fa-envelope fa-2x>< / i>

< h2>联系< / h2>

< / div>



< / div>



< / div>

< / div>

< / div>

< / section>

< / header>

I want these flex items to occupy the full space of this container..
Want the user_links section occupy the rest of the height...

What I have tried:

I tried flex property min height,height etc.. Nothing happened..





Here, the code written in bootstrap


<header class="section-header">
<div class="row no-gutters">
<div class="col-md-4 ">
<img src="img/person1.jpg" alt="perosn" class="img-fluid img--extra">
</div>
<div class="col-md-8 bg-danger">
<div class="info">
<div class="d-flex bg-dark align-items-center justify-content-around py-5 text-white">
<h1>Ubaid Rather</h1>

<i class="fab fa-twitter"></i>

<i class="fab fa-facebook"></i>

<i class="fab fa-instagram"></i>

<i class="fab fa-linkedin"></i>

<i class="fab fa-github"></i>
</div>
<div class="user_proffession">
<h4 class="ml-4">Front End developer</h4>
</div>
<sectionclass="user_links" >
<div class="d-flex align-content-strech text-center justify-content-around" >

<div class="portfolio-item bg-primary" style="flex: 1;">
<i class="fas fa-home fa-2x"></i>
<h2>Home</h2>
</div>

<div class="portfolio-item bg-success" style="flex: 1;">
<i class="fas fa-graduation-cap fa-2x"></i>
<h2>Resume</h2>
</div>


<div class="portfolio-item bg-warning" style="flex: 1;">
<i class="fas fa-folder-open fa-2x"></i>
<h2>file</h2>
</div>


<div class="portfolio-item bg-info" style="flex: 1;">
<i class="fas fa-envelope fa-2x"></i>
<h2>Contact</h2>
</div>

</div>

</div>
</div>
</div>
</section>
</header>

推荐答案

这是你现在所得到的，纠正了几个拼写错误：

编辑小提琴 - JSFiddle [ ^ ]

Here's what you've got at the moment, with a couple of typos corrected:
Edit fiddle - JSFiddle[^]

<div class="info">
    <div class="d-flex bg-dark align-items-center justify-content-around py-5 text-white">

这是固定的vers离开：

编辑小提琴 - JSFiddle [ ^ ]

Here's the fixed version:
Edit fiddle - JSFiddle[^]

<div class="info d-flex flex-column h-100">
    <div class="d-flex bg-dark align-items-center justify-content-around py-5 text-white flex-grow-1">

• 将 d-flex flex-column h-100 添加到< div class =info>
• 广告d flex-grow-1 到< div class =d-flex bg-dark align-items-center justify-content-around py -5 text-white>




• Add d-flex flex-column h-100 to the <div class="info">
• Add flex-grow-1 to the <div class="d-flex bg-dark align-items-center justify-content-around py-5 text-white">




这篇关于这些柔性物品如何占据容器的100％高度..的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！