Переполнение, игнорирующее маржу

Question

У меня есть страница со структурой navbar + content + footer . На нижнем колонтитуле у меня margin-top. Когда содержимое переполняется, поле игнорируется, и между содержимым и нижним колонтитулом нет места. Я хотел бы установить прокручиваемое содержимое при переполнении, но overflow-y: hidden/auto/scroll/visible не работает. Содержимое и нижний колонтитул разделены.

На этой странице три таблицы. Я использую bootstrap для проекта.

Мой код:

<!--NAVBAR-->
...
<!--CONTENT-->
<div class="container" >
  <div class="row">
    <div class="col">
      <div>
        <h1>title1</h1>
        <table class="table table-striped table-hover table-bordered">...</table>
      </div>
      <div>
        <h1>title2</h1>
        <table class="table table-striped table-hover table-bordered">...</table>
      </div>
      <div>
        <h1>title3</h1>
        <table class="table table-striped table-hover table-bordered">...</table>
      </div>
    </div>
  </div>
</div>

<!--FOOTER-->
<div id="footer">
  <div class="container">
    <div class="row">
      <div class="col-sm-8">
      <!--FOOTER CONTENT-->
      </div>
    </div>
  </div>
</div>

Нижний колонтитул CSS:

#footer {
    margin-top: 3rem;
    position: fixed;
    width: 100%;
    padding: 5px;
    bottom: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    z-index: 999;
}

Answer 1

простых способов, мой трюк, добавьте: <div class="clear"></div>
в средний нижний колонтитул и контейнер

css:

.clear {
    float: none;
    clear: both;
}

в # нижний колонтитул css add : float: left;