css页面布局 - 前景“覆盖”背景

Question

我最近开始熟悉Web应用程序开发并且遇到基本的CSS布局问题。

所需的布局是与多个背景元素重叠的中心区域。 见这里：

此图像显示所需的布局：

我还在codepen上攻击它： Codepen
我在哪里使用html div来构建中心区域的背景。

<div class="page-element">
<div class="element-side"></div>
<div class="element-middle"></div>
<div class="element-side"></div>
</div>

和css这样放置：

.page-element {
  display: flex;
}
.element-middle {
  width: 90%;
}
.element-side {
  flex: 1;
}

但是我这样做的方式看起来并不合适。

现代css做这种布局的正确方法是什么？

Answer 1

由于你的大多数结构都很好，我保留了它，主要的变化是如何创建左/右排水沟和页眉/页脚上的溢出。

对于左/右排水沟，我只需移除side元素，保留width: 90%并使用margin: 0 auto水平地将事物置于中心位置。

对于页眉/页脚溢出，我删除了below-nav / footer1元素，在main上添加了伪元素（仅使用CSS），并在页眉/页脚上添加了额外的底部/顶部填充伪不会与其内容重叠。

.nav1, .nav2, .nav1 > div {
  display: flex;
  background: #f05d23;
}
.nav-elem {
  flex: 1;
}
.nav1 > div, .nav2 > div {
  margin: 0 auto;              /*  added, center horiz.  */
  width: 90%;
  text-align: center;
  padding: 1em;
  box-sizing: border-box;
}
.nav2 > div {
  padding-bottom: 3em;         /*  added, avoid overlap  */
}

.main {
  position: relative;
  display: flex;
  background: #e4e6c3;
}
.main::before, .main::after {  /*  added, create overflow  */
  content: '';
  position: absolute;
  left: 5%;
  width: 90%;
  height: 3em;
  background: #f7f7f2;
}
.main::before {
  top: 100%;
}
.main::after {
  bottom: 100%;
}
.main section {
  margin: 0 auto;              /*  added, center horiz.  */
  width: 90%;
  padding: 1em;
  box-sizing: border-box;
  background: #f7f7f2;
}

.footer {
  display: flex;
  background: #2d2a32;
}
.footer section {
  margin: 0 auto;              /*  added, center horiz.  */
  width: 90%;
  padding: 1em;
  padding-top: 4em;            /*  added, avoid overlap  */
  box-sizing: border-box;
  text-align: center;
  color: #f7f7f2;
}

body {
  padding: 0;
  margin: 0;
}

h1, h2 {
  font: bold 2em Sans-Serif;
  margin: 0 0 1em 0;
}
h2 {
  font-size: 1.5em;
}
p {
  margin: 0 0 1em 0;
}

<div class="nav1">
  <div>
    <div class="nav-elem"><a href="#">Plan</a></div>
    <div class="nav-elem"><a href="#">AdminPlan</a></div>
    <div class="nav-elem"><a href="#">Help</a></div>
    <div class="nav-elem"><a href="#">Login</a></div>
  </div>
</div>
<div class="nav2">
  <div>
    <h1>Pageheader.</h1></div>
</div>

<div class="main">
  <section>
    <h1>Main Content</h1>
    <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by
      arches into stiff sections.</p>
    <p>The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought. It wasn't a dream.</p>
    <p>His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had
      recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then
      turned to look out the window at the dull weather. Drops</p>
  </section>
</div>

<div class="footer">
  <section>
    <h2>Footer</h2>
    <p>Whatever goes into a page </p>
  </section>
</div>

注意，.footer section中的padding-top: 4em;填充值当然可以添加到现有的速记属性中，如下所示：padding: 4em 1em 1em;（/* top | horizontal | bottom */）< / em>的

Answer 2

以下是如何实现这一目标的一个例子 - 抱歉，但一直在打字。在移动设备上。

https://jsfiddle.net/su5w1595/

    .wrapper {
Position: absolute;
Height:100%;
Width:100%;
}
.top {
Position:relative;
Background-color:blue;
Width:100%;
Height:30%;
}
.middle {
Position:relative;
Background-color:red;
Width:100%;
Height:30%;
}
.footer {
Position:relative;
Background-color:yellow;
Width:100%;
Height:30%;
}
.main {
Position:absolute;
Top:20%;
Left:10%;
Height: 60%;
Width:80%;
Margin:auto;
Background-color: white;
}