侧边栏菜单添加padding后底部下移问题求助

问题根源：CSS默认采用content-box盒模型，当你给.menu设置height:100%时，这个高度仅计算内容区域的高度。添加上下padding后，元素的总高度会变成100% + 上下padding值，超出视口范围，导致底部内容被挤到视口外。

下面是两种可行的解决方法：

方法1：使用box-sizing: border-box（推荐） #

这是最简洁高效的方案，让padding和border都包含在你设置的height和width范围内，不会额外增加元素的总尺寸。修改后的CSS代码如下：

.menu {
  position: fixed;
  overflow: hidden;
  height: 100%;
  width: fit-content;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  padding: 20px 30px;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
  box-sizing: border-box; /* 新增该行 */
}

添加box-sizing: border-box后，.menu的总高度会严格保持为视口的100%，上下padding会向内挤压内容空间，既保留了你需要的上下均等间距，又不会让底部内容下移出视口。

方法2：通过内部容器实现padding（备选） #

如果不想修改盒模型，可以在.menu内部新增一个容器元素，给这个容器加padding，而.menu本身保持height:100%且不设置padding。示例代码如下：

修改后的HTML： #

<div class="menu">
  <div class="menu-inner">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 144.04">
        "Here is an SVG image"
    </svg>
    <ul class="menu-list">
      <li><a href="#">Портфолио</a></li>
      <li><a href="#">Услуги</a></li>
      <li><a href="#">Обо мне</a></li>
      <li><a href="#">Контакты</a></li>
    </ul>
    <div class="socials-menu">
      <svg width="64" height="64" viewBox="0 0 64 65" fill="none" xmlns="http://www.w3.org/2000/svg">
          "Here is an SVG image"
        </svg>
      <svg width="64" height="64" viewBox="0 0 64 65" fill="none" xmlns="http://www.w3.org/2000/svg">
          "Here is an SVG image"
        </svg>
      <h2>@tupagon</h2>
    </div>
  </div>
</div>

修改后的CSS： #

.menu {
  position: fixed;
  overflow: hidden;
  height: 100%;
  width: fit-content;
  display: flex;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
}

.menu-inner {
  flex: 1;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  padding: 20px 30px;
}

这种方法通过内部容器承载padding和flex布局，也能实现上下均等间距且内容不下移的效果，但代码量会比第一种方法多一些。

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