Question

我需要一个页脚，该页脚与上面的内容部分重叠。重叠的部分占据了浏览器的整个宽度，其中内容被限制为最大宽度。该网站具有响应能力，需要灵活。

由于百分比是根据元素的宽度而不是高度计算的，因此我尝试在页脚上添加负的％边距，并在内容中添加相同的％填充以为其留出空间。这有效，但是直到我达到内容的最大宽度为止。一旦达到最大宽度，svg上的％重叠就会变得越来越宽，内容的％填充保持不变（因为它的宽度没有增长）。

我怎样才能使页脚与上面的区域重叠，但要给内容填充或空格，使重叠的svg不能覆盖它？

CodePen demo。演示中的宽度不是我的实际宽度，仅用于演示。

.constrained {
  max-width: 700px;
  margin: 0 auto;
}
.header {
  background-color: #1b5d93;
  padding: 30px;
  color: #fff;
}
.page-content {
  display: flex;
}
.main-content {
  padding: 20px 0;
  width: 70%;
  background-color: #ccc;
}
.sidebar {
  width: 30%;
  background-color: #fff;
}
.footer {
  position: relative;
}
.footer svg {
  display: block;
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
}
.footer-container {
  padding: 30px;
  background-color: #1b5d93;
  color: #fff;
}

<div class="header">
  <div class="constrained">
    <h1>Header</h1>
  </div>
</div>
<div class="main-area">
  <div class="page-content constrained">
    <div class="main-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie fermentum metus, a congue felis venenatis id. Aliquam pulvinar mauris sed ante accumsan bibendum eu eget eros. Curabitur ipsum tortor, sollicitudin at molestie vitae, consequat
        sed quam. Duis pellentesque tristique rutrum. Aenean nec lobortis lectus. Phasellus et nulla ut magna suscipit congue non id nulla. Suspendisse pellentesque eu risus a tristique. Phasellus porta id tortor a blandit. Nullam finibus dui ac mollis
        rutrum. Vivamus maximus tortor id purus consequat, vitae commodo purus feugiat. In convallis, nunc et fringilla ultricies, ipsum lorem sollicitudin lorem, non luctus eros nibh egestas ex. Integer tristique scelerisque viverra. Fusce porta lectus
        velit, sed consequat risus pretium quis. In id molestie dui.</p>
      <p>Fusce mattis, nisi ac pulvinar cursus, massa ligula sodales est, vel bibendum tellus urna sit amet lorem. Etiam nec pulvinar ante. Vestibulum consequat scelerisque vestibulum. Nam mi enim, consequat id ultrices ut, laoreet at nisi. Proin ut pharetra
        dolor. Suspendisse porttitor vel diam eu condimentum. Donec a tortor a velit suscipit porttitor. Proin sit amet laoreet urna, ac lobortis lectus. In suscipit tellus eu gravida hendrerit. Pellentesque congue tempor malesuada. Maecenas et mauris
        est. Ut sapien enim, vestibulum eget tincidunt sed, aliquet non nisl.</p>
      <p>Phasellus rhoncus varius faucibus. Fusce laoreet eros lectus, vulputate sagittis magna varius vitae. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nec ex elit. Quisque facilisis condimentum porttitor.
        Cras dignissim, odio quis lobortis viverra, sem ipsum feugiat odio, nec elementum sem ligula a elit. Praesent suscipit est ut ante malesuada convallis. Morbi sagittis at lectus vitae condimentum. Mauris iaculis commodo odio, vitae finibus dolor
        efficitur in. Donec lectus mauris, cursus a viverra ac, placerat vitae magna. Donec nibh libero, auctor ac metus a, posuere efficitur purus. In interdum mauris vel pharetra cursus. Nam iaculis est tortor, sed elementum eros congue ut. Fusce vitae
        ipsum rhoncus, cursus ante ac, venenatis purus. Vivamus id augue vel nisl interdum faucibus ac a massa. Nunc nibh orci, tempor hendrerit rhoncus ac, lacinia in diam.</p>
    </div>
    <div class="sidebar">
      <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
      </ul>
    </div>
  </div>
</div>
<div class="footer">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1309 60"><path d="M1309 45c-142.2 20.1-360.5 12.3-653.8-26.1C361.8-19.6 143.4 6.5 0 45v15h1309V45z" fill-rule="evenodd" clip-rule="evenodd" fill="#1b5d93"/></svg>
  <div class="footer-container">
    <div class="constrained">
      <div>Some content here</div>
    </div>
  </div>
</div>

Answer 1

在页脚中添加顶部偏移：

.footer {
  position: relative;
  top:10px;
}

Answer 2

根据（https://stackoverflow.com/a/12034794/3684265），您可以为main-content提供以下样式，以使填充不会影响宽度：

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

或者您始终可以将内容放在另一个div中，并进行填充：

<div class="main-content">
    <div style="padding-bottom:10%;">
        <p>Content Here</p>
    </div>
</div>

不要使用内联样式，我这样做是出于说明目的。

Answer 3

您需要在主要内容中添加更多灰色区域。除了添加padding-bottom之外，保持CSS不变。

.main-content {
  padding: 20px 0;
  width: 70%;
  background-color: #ccc;
  padding-bottom:5%;
}

如何将页脚重叠在主要内容区域上而不隐藏内容

3 个答案: