为什么我的柔性版本即使在定义柔性基础的情况下也能发挥作用？

我想让3个盒子以1：4：1的比例填充屏幕的高度。为什么我的柔性版本即使在定义柔性基础的情况下也能发挥作用？

*{ 
 
    margin:0; 
 
    padding:0; 
 
} 
 
.container{ 
 
    display: flex; 
 
    flex-direction:column; 
 
    align-items: center; 
 
    height:100100%; 
 
    width:100%; 
 
} 
 
.title{ 
 
    
 
    background:yellow; 
 
    flex-basis:30px; 
 
    flex-grow:1; 
 
} 
 
.box{ 
 
    background:green; 
 
    flex-basis:120px; 
 
    flex-grow:4; 
 

 
} 
 

 
.buttons{ 
 
    background:red; 
 
    flex-basis:30px; 
 
    flex-grow:1; 
 
    }


 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<div class="container"> 
 
    <div class="title"> 
 
    Random Quote Generator 
 
    </div> 
 
    <div class="box"> 
 
    This is Where Author and Quote go. 
 
    </div> 
 
    <p class="blank"></p> 
 
    <div class="buttons"> 
 
    <a class="button"><i class="fa fa-twitter"></i></a> 
 
    <a class=button><i class="fa fa-tumblr"></i></a> 
 
    <a class='button'><i class="fa fa-chevron-right"></i></a> 
 
    </div> 
 
</div>

来源

2017-06-19 user132522

你有一个错字'高度：100100％;' – LGSon

此外，你的身体需要的高度'HTML，身体{身高：100％; }' – LGSon

[为什么百分比高度无法在我的div上工作？]（https://stackoverflow.com/questions/31728022/why-is-percentage-height-not-working-on-my-div） – LGSon

您使用百分比高度。这就要求你在父元素上定义一个高度。它变得棘手。看到这里：Working with the CSS height property and percentage values

而是，只需使用height: 100vh，这是更简单，更容易。

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    height: 100vh; /* NEW */ 
 
    width: 100%; 
 
} 
 

 
.title { 
 
    background: yellow; 
 
    flex: 1 0 30px; 
 
} 
 

 
.box { 
 
    background: green; 
 
    flex: 4 0 120px; 
 
} 
 

 
.buttons { 
 
    background: red; 
 
    flex: 1 0 30px; 
 
} 
 

 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<div class="container"> 
 
    <div class="title"> 
 
    Random Quote Generator 
 
    </div> 
 
    <div class="box"> 
 
    This is Where Author and Quote go. 
 
    </div> 
 
    <p class="blank"></p> 
 
    <div class="buttons"> 
 
    <a class="button"><i class="fa fa-twitter"></i></a> 
 
    <a class=button><i class="fa fa-tumblr"></i></a> 
 
    <a class='button'><i class="fa fa-chevron-right"></i></a> 
 
    </div> 
 
</div>

来源

2017-06-19 20:02:05

哇。一件小事改变了一切。 – user132522

.container的父元素是什么？这是最后一个分支。 – user132522

在这种情况下，这将是'body'元素。有关更多详细信息，请参阅链接参考中的答案。 –

为什么我的柔性版本即使在定义柔性基础的情况下也能发挥作用？

回答

相关问题