Chrome扩展弹窗边框未延伸至底部的原因排查求助

1. 清除Chrome弹窗默认样式干扰 #

Chrome扩展的弹窗body自带默认margin和padding，且弹窗高度由内容撑开，容易导致边框无法铺满底部。直接强制重置基础样式：

body {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh;
  box-sizing: border-box; /* 让边框纳入元素总尺寸计算 */
}

2. 修正Bootstrap容器高度继承 #

如果使用了Bootstrap的container/card等组件，这类元素可能自带margin-bottom，或父容器未设置高度继承。给最外层包裹div添加以下样式：

.popup-container {
  height: 100%;
  width: 100%;
  border: 2px solid #your-color; /* 替换为你的边框样式 */
  box-sizing: border-box;
  overflow: hidden; /* 防止子元素溢出导致边框错位 */
}

同时检查Bootstrap的row/col组件，移除不必要的mb-*类，避免额外底部间距。

3. 提升Sass样式优先级 #

Sass嵌套结构可能导致样式优先级低于Bootstrap或Chrome默认样式，给边框规则加上更高优先级：

body > .popup-container {
  border: 2px solid #your-color !important;
  height: 100vh;
}

4. 匹配弹窗固定尺寸（若有设置） #

如果在manifest.json中指定了弹窗固定宽高：

"action": {
  "default_popup": "popup.html",
  "default_width": 320,
  "default_height": 480
}

需确保边框容器尺寸严格匹配：

.popup-container {
  width: 320px;
  height: 480px;
  border: 2px solid #your-color;
  box-sizing: border-box;
}

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