2017-12-28 8 views
2

最初は左上に、2番目は右上に、3番目は左下に、4番目は左下に表示したいとします。記事全体のブラウザの高さを占める方法を許可する方法

は、現在、それは次のように表示されます。Output

しかし、それは完全な高さを取っていません。私は上の2つの記事を高さの50%、残りの50%を下の記事に表示したい。

body { 
 
    height: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
article:first-child { 
 
    height: 50%; 
 
    width: 50%; 
 
    float: left; 
 
    position: static; 
 
    background-color: red; 
 
} 
 

 
article:nth-child(2){ 
 
    height: 50%; 
 
    width: 50%; 
 
    float: left; 
 
    position: static; 
 
    background-color: yellow; 
 
} 
 

 
article:nth-child(3){ 
 
    height: 50%; 
 
    width: 50%; 
 
    float: left; 
 
    position: static; 
 
    background-color: green; 
 
} 
 

 
article:nth-child(4){ 
 
    height: 50%; 
 
    width: 50%; 
 
    float: left; 
 
    position: static; 
 
    background-color: blue; 
 
}
<article>First</article> 
 
<article>Second</article> 
 
<article>third</article> 
 
<article>fourth</article>

答えて

1

あなたは50vw & 50vhフレキシボックスビューポート単位、でそれを行うことができます50%ビューポートのwidthheight意味:

body { 
 
    display: flex; /* displays childen inline by default */ 
 
    flex-wrap: wrap; /* enables wrapping */ 
 
    width: 100vw; /* added */ 
 
    height: 100vh; /* modified */ 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
article:first-child { 
 
    height: 50vh; 
 
    width: 50vw; 
 
    /*float: left;*/ 
 
    /*position: static;*/ 
 
    background-color: red; 
 
} 
 

 
article:nth-child(2) { 
 
    height: 50vh; 
 
    width: 50vw; 
 
    /*float: left;*/ 
 
    /*position: static;*/ 
 
    background-color: yellow; 
 
} 
 

 
article:nth-child(3) { 
 
    height: 50vh; 
 
    width: 50vw; 
 
    /*float: left;*/ 
 
    /*position: static;*/ 
 
    background-color: green; 
 
} 
 

 
article:nth-child(4) { 
 
    height: 50vh; 
 
    width: 50vw; 
 
    /*float: left;*/ 
 
    /*position: static;*/ 
 
    background-color: blue; 
 
}
<article>First</article> 
 
<article>Second</article> 
 
<article>third</article> 
 
<article>fourth</article>

注:デフォルトでfloat sおよびposition: staticため必要はありません。

0

お試し済みheight: 50vh;

関連する問題