如何让容器内盒子尺寸正确且均匀分布？附代码问题咨询

我期望实现固定高度的蓝色卡片按钮效果，但实际呈现的按钮高度超出了预期容器；另外如果在footer标签前结束对应容器标签，按钮还会延伸至footer区域。请问我的代码存在什么问题？

我的代码 #

CSS 代码

.rs-container .rsboxsection {
    padding-top: 0;
}

.rs-container .rsboxsection .row {
    max-width: 64rem;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.rs-container .rsboxsection .row .layout .grid {
    margin-left: -12px;
    margin-right: -12px;
}

.rs-container .rsboxsection .row .layout .grid .grid-item .panel-interactive {
    margin-bottom: 0;
}

.rs-container .rsboxsection .row .layout .grid .grid-item .panel-interactive .title {
    margin-bottom: .5rem;
    color: #FFFFFF;
}

.rs-container .rsboxsection .row .layout .grid .grid-item .panel-interactive .WSPanel a {
    display: block;
    border: 5px solid #0000FF;
    border-radius: 0.5rem;
    padding: 1.2em;
    background-color: #0000FF;
    min-height: 12.5em;
}

.rs-container .rsboxsection .row .layout .grid .grid-item .panel-interactive .WSPanel p {
    color: #FFFFFF;
}

HTML 代码

<div class="rsboxsection">  
  <div class="row">
    <div class="layout">
      <div class="grid thirds">
        <!-- Westside Shuttle Button -->
        <div class="grid-item" style="height: 200px;">
          <div class="panel-interactive">
            <div class="WSPanel">
              <a href="routes/ws.html">
                <h3 class="title" style="font-weight:Bold">WS</h3>
                  <p>Services .... in some city.</p>
              </a>    
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

1. 高度超出预期的原因 #

你给.grid-item设置了固定height:200px，但内部的.WSPanel a设置了min-height:12.5em（换算后约等于200px），再加上padding:1.2em和5px的边框，这些额外尺寸会让.WSPanel a的总高度超过200px。而.grid-item默认没有溢出控制，超出的部分直接显示在容器外，导致实际效果和预期不符。

2. 按钮延伸至footer的原因 #

这是内容溢出的连锁反应：.grid-item的内容超出自身容器后，没有被裁剪，会继续向下渲染，自然覆盖到下方的footer区域。解决内容溢出问题后，这个现象就会消失。

3. 具体修复方案 #

• 方案一：统一尺寸计算规则
  给.WSPanel a添加box-sizing:border-box，让padding和边框被包含在min-height的尺寸内，不会额外增加总高度：

.rs-container .rsboxsection .row .layout .grid .grid-item .panel-interactive .WSPanel a {
    box-sizing: border-box; /* 新增这行 */
    display: block;
    border: 5px solid #0000FF;
    border-radius: 0.5rem;
    padding: 1.2em;
    background-color: #0000FF;
    min-height: 12.5em;
}

• 方案二：调整容器或内部元素高度
  要么移除.grid-item上的固定height:200px，让容器自适应内部内容高度；要么减小.WSPanel a的min-height或padding，确保内部元素总高度不超过200px。

• 方案三：裁剪溢出内容
  给.grid-item添加overflow:hidden，强制裁剪超出容器的部分，避免影响下方的footer：

.grid-item {
    overflow: hidden;
}

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