響應div的視口大小的50％的高度

我儘量讓四個箱，每箱50％的高度和全屏幕尺寸的50％的寬度的網格，像顯示在這張照片： http://a.pomf.se/gqnzzs.jpg 響應div的視口大小的50％的高度

我的問題是，我無法獲得50％的身高。如何在每個視口尺寸的50％的高度上設置2格的高度？

HTML：

<div class="wrapper"> 
    <div class="row"> 
    <div class="panel-1">... </div> 
    <div class="panel-2">...</div> 
    </div> 
    <div class="row"> 
    <div class="panel-3">...</div> 
    <div class="panel-4">...</div> 
    </div> 
</div>

CSS：

.wrapper{ 
    width: 100%; 
    height: 100%; 
    display: inline-block;} 

.panel-1{ 
    width: 50%; 
    float: left; 
    height: 50%;} 

.panel-2{ 
    width: 50%; 
    float: left; 
    height: 50%;} 

.panel-3{ 
    width: 50%; 
    float: left; 
    height: 50%;} 

.panel-4{ 
    width: 50%; 
    float: left; 
    height: 50%;}

我非常感謝任何幫助！

電賀

來源

2015-04-08 halp

在supported browsers,你可以使用viewport-percentages units，vh，vw，vmin，vmax。

在這種情況下，只需使用50vh，其中1個單位等於初始包含塊高度的1％。

Example Here

.panel-1, .panel-2, 
.panel-3, .panel-4 { 
    height: 50vh; 
    width: 50%; 
    float: left; 
}

對於它的價值，如果你想仍使用基於百分比的單位，你需要定義所有的父元素的高度太：

Updated Example

html, body, .wrapper { 
    height: 100%; 
} 
.row { 
    height: 50%; 
} 
.panel-1, .panel-2, 
.panel-3, .panel-4 { 
    height: 100%; 
    width: 50%; 
    float: left; 
}

來源

2015-04-08 01:58:37

完美的作品！似乎可以在所有主流瀏覽器上運行，包括IE9。我會說這已經夠好了！尤其是在Windows 10不再使用IE的情況下。非常感謝您的快速回復！ – halp

@toumazi不客氣 - 很高興聽到它的幫助。 –

由flexbox解決。 Caniuse

沒有浮動，沒有clearfixes - 簡單明瞭;

*, 
 
*:before, 
 
*:after { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
html, 
 
body { 
 
    padding: 0; 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
body { 
 
    background-color: #333; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: box; 
 
    display: flex; 
 
    -webkit-box-flex: 1; 
 
    -moz-box-flex: 1; 
 
    -o-box-flex: 1; 
 
    box-flex: 1; 
 
    -webkit-flex: 1; 
 
    -ms-flex: 1; 
 
    flex: 1; 
 
    -webkit-box-orient: horizontal; 
 
    -moz-box-orient: horizontal; 
 
    -o-box-orient: horizontal; 
 
    -webkit-box-lines: multiple; 
 
    -moz-box-lines: multiple; 
 
    -o-box-lines: multiple; 
 
    -webkit-flex-flow: row wrap; 
 
    -ms-flex-flow: row wrap; 
 
    flex-flow: row wrap; 
 
} 
 
.flex__item { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: box; 
 
    display: flex; 
 
    -webkit-box-flex: 1; 
 
    -moz-box-flex: 1; 
 
    -o-box-flex: 1; 
 
    box-flex: 1; 
 
    -webkit-flex: 0 0 50%; 
 
    -ms-flex: 0 0 50%; 
 
    flex: 0 0 50%; 
 
    height: 50%; 
 
    background-color: #777; 
 
    border: 1px solid #000; 
 
} 
 
.flex__item:nth-child(1) { 
 
    background-color: #9aa0a8; 
 
} 
 
.flex__item:nth-child(2) { 
 
    background-color: #a7c4b5; 
 
} 
 
.flex__item:nth-child(3) { 
 
    background-color: #a9d8b8; 
 
} 
 
.flex__item:nth-child(4) { 
 
    background-color: #beffc7; 
 
}

<div class="flex__item"></div> 
 
<div class="flex__item"></div> 
 
<div class="flex__item"></div> 
 
<div class="flex__item"></div>

來源

2015-04-08 02:34:34 DonSinDRom

香草！提供更多瀏覽器支持。非常感謝！現在我只需要將它與基礎結合起來。 – halp

響應div的視口大小的50％的高度

回答

相關問題