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 元素，在主元素上添加了伪元素（仅使用 CSS 完成），并在页眉/页脚上添加了额外的底部/顶部填充，因此伪元素不会t 重叠他们的内容。

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

---

注意，padding-top: 4em; 中的 .footer section 的填充值当然可以像这样添加到现有的速记属性中：padding: 4em 1em 1em; (/* top | horizontal | bottom */)

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