如何創建一個包含4個象限的頁面，每個象限都適合全屏顯示？

-2

想法是製作四個象限，每個象限填滿整個屏幕。它們將始終如此顯示：
象限1 |象限2
象限3 |象限4如何創建一個包含4個象限的頁面，每個象限都適合全屏顯示？

我嘗試了一個基於另一個答案的CSS，但無法弄清楚。謝謝大家提前。

這裏是一個鏈接，一塊不起作用：http://codepen.io/supertiroles/pen/GpyRpQ

這裏是CSS和HTML：

.tl { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 50%; 
 
    bottom: 50%; 
 
    background: red; 
 
    border: solid #000; 
 
    border-width: 0 10px 10px 0; 
 
} 
 
.tr { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50%; 
 
    right: 0; 
 
    bottom: 50%; 
 
    background: blue; 
 
    border: solid #000; 
 
    border-width: 0 0 10px 0; 
 
} 
 
.bl { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 0; 
 
    right: 50%; 
 
    bottom: 0; 
 
    background: yellow; 
 
    border: solid #000; 
 
    border-width: 0 10px 0 0; 
 
} 
 
.br { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    right: 0; 
 
    bottom: 0; 
 
    background: green; 
 
}

<html> 
 

 
<body> 
 
    <div class="tl"></div> 
 
    <div class="tr"></div> 
 
    <div class="bl"></div> 
 
    <div class="br"></div> 
 
</body> 
 

 
</html>

來源

2015-10-19 André Barreto

看起來是工作的罰款給我。 – Wobbles

什麼不起作用？ – santon

發佈的代碼和鏈接到的是不一樣的。 –

可以解決使用jQuery您的問題：

$(document).ready(function() { 
 
    var fullscreen = $(window).height(); 
 
    $('div').css("height", fullscreen); 
 
});

body{ 
 
    margin: 0; 
 
} 
 
div{ 
 
    width: 100%; //This is only for demo 
 
} 
 
.tl { 
 
    background: red; 
 
} 
 
.tr { 
 
    
 
    background: blue; 
 
} 
 
.bl { 
 
    
 
    background: yellow; 
 
} 
 
.br { 
 
    background: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<div class="tl"></div> 
 
<div class="tr"></div> 
 
<div class="bl"></div> 
 
<div class="br"></div>

來源

2015-10-19 21:03:31

謝謝，但這不起作用... –

現在可以嗎？ –

每種顏色都必須填滿整個屏幕。我不知道我是否說得很清楚我猜... –

@Pangloss回答@Mario Kurzweil幫了很多忙！

的解決方案，Pangloss說，就是利用視單位：
HTML

<div class="tl"></div> 
<div class="tr"></div> 
<div class="bl"></div> 
<div class="br"></div>

CSS

body { 
    width: 200vw; 
    height: 200vh; 
    margin: 0; 
} 
div { 
    width: 100vw; 
    height: 100vh; 
    float: left; 
} 
.tl { 
    background: red; 
} 
.tr { 
    background: green; 
} 
.bl { 
    background: blue; 
} 
.br { 
    background: yellow; 
}

來源

2015-10-20 15:09:36

如何創建一個包含4個象限的頁面，每個象限都適合全屏顯示？

回答

相關問題