忽略边距溢出

Posted 2023-03-06

【中文标题】忽略边距溢出

【英文标题】：Overflow ignoring the margin

【发布时间】：2020-06-26 17:37:17

【问题描述】：

我有一个具有 导航栏 + 内容 + 页脚 结构的页面。在页脚，我有margin-top。当内容溢出时，边距被忽略，内容和页脚之间没有空格。我想在内容溢出时将其设置为可滚动，但overflow-y: hidden/auto/scroll/visible 不起作用。内容和页脚是分开的。

此页面上有三个表格。我正在为该项目使用引导程序。

我的代码：

<!--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;

【参考方案1】：

我的技巧的简单方法，添加：<div class="clear"></div> 在中间页脚和容器中

css：

.clear 
    float: none;
    clear: both;

在#footer css 中添加：float: left;