2017-06-19 54 views
0

我想讓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>

+0

你有一個錯字'高度:100100%;' – LGSon

+0

此外,你的身體需要的高度'HTML,身體{身高:100%; }' – LGSon

+0

[爲什麼百分比高度無法在我的div上工作?](https://stackoverflow.com/questions/31728022/why-is-percentage-height-not-working-on-my-div) – LGSon

回答

2

您使用百分比高度。這就要求你在父元素上定義一個高度。它變得棘手。看到這裏: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>

+1

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

+0

.container的父元素是什麼?這是最後一個分支。 – user132522

+0

在這種情況下,這將是'body'元素。有關更多詳細信息,請參閱鏈接參考中的答案。 –