不同父元素的HTML元素水平对齐及表单margin-bottom失效问题

一、解决表单与Tabs水平对齐问题 #

方法1：CSS原生方案（推荐，现代浏览器支持） #

使用scrollbar-gutter: stable属性，让表单容器始终预留滚动条宽度——无论是否显示滚动条，容器整体宽度都和Tabs保持一致，无需JS计算。

修改.form-panel的CSS：

.form-panel {
  width: 70%; 
  height: 1000px;
  background-color: #FFF;
  margin: 0 auto;
  overflow-y: auto;
  border-bottom: solid #FE6D73 7px; 
  scrollbar-gutter: stable; /* 新增此行 */
}

方法2：兼容旧浏览器的JS修正 #

原JS代码的问题是字符串与数字直接拼接（而非数值相加），导致右边距计算错误。修正后的JS：

$(document).ready(function () {
  setFormsWidth();
  // 窗口缩放时重新计算
  $(window).resize(setFormsWidth);
});

function setFormsWidth() {
  let scrollbox = document.createElement('div');
  scrollbox.style.overflow = 'scroll';
  scrollbox.style.width = '100px';
  scrollbox.style.height = '100px';
  document.body.appendChild(scrollbox);
  
  const scrollBarWidth = scrollbox.offsetWidth - scrollbox.clientWidth;
  document.body.removeChild(scrollbox);

  const formPanel = document.getElementById("main-form");
  const style = window.getComputedStyle(formPanel);
  const marginRight = parseInt(style.getPropertyValue('margin-right'), 10);
  const newMargin = marginRight + scrollBarWidth;

  formPanel.style.marginRight = `${newMargin}px`;
}

二、解决表单margin-bottom不生效问题 #

原问题是表单固定高度+滚动容器特性导致外边距被截断，两种修正方式：

1. 将表单的height改为min-height，同时确保父容器有足够空间容纳外边距：

.form-panel {
  width: 70%; 
  min-height: 1000px; /* 替换height为min-height */
  background-color: #FFF;
  margin: 0 auto 20px; /* 添加margin-bottom */
  overflow-y: auto;
  border-bottom: solid #FE6D73 7px; 
  scrollbar-gutter: stable;
}

.content {
  background-color: green;
  padding-bottom: 20px; /* 确保父容器能容纳表单的外边距 */
}

2. 用padding-bottom代替margin-bottom，直接在表单内部预留空间：

.form-panel {
  /* ...其他样式不变 */
  padding-bottom: 20px; /* 替换margin-bottom */
}

完整修正代码 #

HTML #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css"/>
</head>
<body>
  
  <div class="wrapper">
    <div class="header">Header</div>
    <div class="tabs">THIS IS TAB</div>
    <div class="page" id="calculator">
      <div style="height:1000px;">
        <div class="content">
          <form class="form-panel" id="main-form">THIS IS FORM</form>
        </div>
      </div>
    </div>
    <div class="footer">Footer</div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script type="text/javascript" src="script.js"></script>
</body>
</html>

CSS（使用scrollbar-gutter方案） #

html, body {
  height: 100%;
  margin: 0;
  overflow:hidden;
}

.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header, .footer {
  background: silver;
}
.page {
  flex: 1;
  overflow: auto; 
  background: pink;
}

.content {
  background-color: green;
  padding-bottom: 20px;
}

.tabs {
  width: 70%;
  height: 50px;
  background-color: aqua;
  margin: 0 auto;
  border-bottom: solid #FE6D73 7px; 
}

.form-panel {
  width: 70%; 
  min-height: 1000px;
  background-color: #FFF;
  margin: 0 auto 20px;
  overflow-y: auto;
  border-bottom: solid #FE6D73 7px; 
  scrollbar-gutter: stable;
}

内容的提问来源于stack exchange，提问作者Lorna from Perth