爲什麼我的柔性版本即使在定義柔性基礎的情況下也能發揮作用？

我想讓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'元素。有關更多詳細信息，請參閱鏈接參考中的答案。 –

爲什麼我的柔性版本即使在定義柔性基礎的情況下也能發揮作用？

回答

相關問題