html - css 页面布局 - 前景 "overlying"背景

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 完成)和一个额外的底部/页眉/页脚上的顶部填充，这样伪就不会与它们的内容重叠。

.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 | horizo​​ntal | bottom */)