html - 如何在主要内容区域上重叠页脚但不隐藏内容

Question

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

由于百分比根据元素的宽度而不是高度计算，我尝试在页脚上添加一个负的 % 边距，并向内容添加相同的 % 填充以为其留出空间。这有效，但只有在我达到内容的最大宽度之前。一旦达到最大宽度，svg 上的 % overlap 会不断变宽，内容的 % padding 保持不变(因为它的宽度没有增加)。

我怎样才能让页脚与它上面的区域重叠，但给内容填充或空间，这样它就不会被重叠的 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;
}