如何实现HTML div固定在页面底部 解决padding导致内容溢出问题

溢出的核心原因是CSS默认盒模型规则：默认box-sizing: content-box下，元素的width仅指代内容区域宽度，你设置的padding: 25px会额外叠加在宽度之上，导致元素总宽度超过100%视口宽度，右侧溢出。

以下是不同场景的可行实现方案：

• 方案1：固定悬浮在视口底部（不随页面滚动位移），直接修改原有代码
  给.footer类添加box-sizing: border-box属性，该属性会让内边距、边框都被计算在你设置的width范围内，不会额外撑宽元素，同时补充定位参数确保位置准确：

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    background: #0084FF;
    color: #fff;
    padding: 25px;
    margin: 0;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    z-index: 99999;
  }
  

• 方案2：省略宽度设置，用定位自动撑满横向空间
  不需要手动设置width:100%，同时设置left:0; right:0，块级元素会自动铺满整个视口横向宽度，也能避免宽度计算错误导致的溢出问题：

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #0084FF;
    color: #fff;
    padding: 25px;
    margin: 0;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    z-index: 99999;
  }
  

• 方案3：页脚放在页面内容最底部，内容不足时自动贴视口底部（不悬浮）
  如果不需要页脚始终悬浮在窗口底部，只需要它在页面内容末尾、短页面时自动贴底，可以用弹性盒布局实现：

  /* 先给页面根容器设置以下属性，此处假设根容器为body */
  body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
  }
  .footer {
    margin-top: auto;
    box-sizing: border-box;
    width: 100%;
    background: #0084FF;
    color: #fff;
    padding: 25px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  }
  

内容的提问来源于stack exchange，提问作者T3C