html - CSS一页纸布局

Question

我正在为一页纸的基本布局而苦苦挣扎。

这是我的代码:

section {
  position: relative;
  height: 100vh;
}

.section-single>.arrow {
  position: absolute;
  left: 50%;
  bottom: 10%;
}

.section-double>.content-left {
  width: 50%;
  float: left;
  background: gray;
}

.section-double>.content-right {
  width: 50%;
  float: left;
  background: black;
}

#section1 {
  background: green;
}

#section2 {
  background: red;
}

#section3 {
  background: yellow;
}

<section class="section-single" id="section1">
  <iframe src="https://www.youtube.com/watch?..."></iframe>
  <a href="#section2"><span class="arrow">section 2</span></a>
</section>
<section class="section-double" id="section2">
  <div class="content-left" id="div1">
  </div>
  <div class="content-right" id="div2">
</section>
<section class="section-double" id="section3">
  <div class="content-left" id="div3">
  </div>
  <div class="content-right" id="div4">
</section>

它应该是这样的:

正如您在 css 中看到的，每个部分都应该有可用的全屏大小，而 div 应该有页面的 50%。但是，div 定位未按预期工作(由 .section-double > .content-left 和 .section-double > .content-right 中的背景属性检查.

你能帮帮我吗？

Answer 1

您可以将 flexbox 用于此布局:

body {
  margin:0;
}
.container {
  display:flex;          /* set the container to flex */
  flex-wrap:wrap;        /* allow children to wrap */
  flex-direction:row;    /* line up children in a row - default value not needed */
}
.container > div {
  min-height:100vh;        /* moved as per comments below */
  border:1px solid black;
  box-sizing:border-box;   /* demo borders only */
}
.full-width {
  width:100%;              
}
.half-width {
  width:50%;
}

<div class="container">
  <div class="full-width">
    section one
  </div>
  <div class="half-width">
    div 1
  </div>
  <div class="half-width">
    div 2
  </div>
  <div class="half-width">
    div 3
  </div>
  <div class="half-width">
    div 4
  </div>
</div>