Question

这个想法是制作四个象限，每个象限填满整个屏幕。它们将始终显示如下：
象限1 |象限2
象限3 |象限4

我在这里根据另一个答案尝试了一个css，但无法弄明白。提前谢谢大家。

以下是不起作用的文章的链接：http://codepen.io/supertiroles/pen/GpyRpQ

这是css和html：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

您可以使用jQuery解决您的问题：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

@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;
}

如何创建一个包含4个象限的页面，每个象限都适合全屏？

2 个答案: