FullPage.js：div 定位问题

Question

我正在使用 FullPage.js（用于官方文档 here）我需要一张幻灯片（ #section ，如 .js 中所称） 4 个 2 乘 2 堆叠的盒子占据了整个幻灯片，幻灯片周围有一点空白（就像我制作的方案一样）。我试了很多方法，display: block、float、display: flex；但我并没有完全成功。最好的是 flex-box，唯一的问题是它不适用于 safari 和 android browser。任何人都可以给我一些帮助吗？谢谢！！

更新

实际上最好的结果是：

<div class="section" id="section2">
      <header class="header" >
          <h1>HEADER</h1>     
      </header>
  <div class="content">
            <div class="contentflex"id="up">
                <div class="flex-item" id="box1">  
                </div>                
                <div class="flex-item" id="box2">
                </div>             
            </div>

            <div class="contentflex" id="down">
                    <div class="flex-item" id="box3">
                    </div>    
                    <div class="flex-item" id="box4">
                    </div>
            </div>       
  </div>
</div>

css:

.contentflex{
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  padding-right:1.9em;
  padding-left:2em;
  padding-bottom:0;
  padding-top:0;
  justify-content: center;
  height: 20em
}

#up, #down{
   position:relative;
}

.flex-item{

            width: 50%;
            padding-right:10%; 
            padding-left:10%;
            padding-top:5%;
            padding-bottom:5%;
}

.content{
            position: relative;
            top: 50%;
            transform: translateY(-50%);
            text-align: center;
}

Answer 1

方框使用 position:absolute，章节和幻灯片使用 relative。

Example online

.section,
.slide{
    position:relative;
}
.box{
    position: absolute;
    width:50%;
    height: 50%;
}
#box1{
    background: blue;
    top: 0;
    left: 0;
}
#box2{
    background: green;
    top:0;
    right:0;
}
#box3{
    background: pink;
    bottom:0;
    left:0;
}
#box4{
    background: orange;
    bottom:0;
    right:0;
}

使用此 HTML 标记：

<div id="fullpage">
    <div class="section">
        <div class="box" id="box1"></div>
        <div class="box" id="box2"></div>
        <div class="box" id="box3"></div>
        <div class="box" id="box4"></div>
    </div>
</div>

FullPage.js：div 定位问题

FullPage.js: issues in div positioning

javascript

html

css

position

fullpage.js