Как перекрыть нижний колонтитул над основной областью содержимого, но не скрыть содержимое

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

Согласно (https://stackoverflow.com/a/12034794/3684265) вы можете назначить основному контенту следующие стили, чтобы отступы не влияли на ширину:

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

Вам нужно добавить больше серой области в ваш основной контент.Оставьте CSS таким же, за исключением добавления padding-bottom.

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

Answer 3

Добавьте верхнее смещение в нижний колонтитул:

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