响应时，子div超过父div

Posted 2021-05-02

有人对此有任何指示吗？我有很多回应（这个是专门用于电子邮件的）这个问题。

问题的例子：https://imgur.com/IRYTJ6Y

我的子元素仅在调整移动设备大小时超过父元素（此窗口的大小为375px）。

这通常只发生在我添加了一个边距/填充，将右滚动扩展相同的距离时。所以例如我在左侧和右侧有一个30px的填充，所以右边有60个额外的像素（向右滚动这就是你所看到的：https://imgur.com/ZZ7okEv）

寻找一个将来可以使用的修复程序，而不仅仅是这个设计，但这里是我目前正在使用的代码：

<table class="row" style="height:100%;width:100%; max-width:inherit">
  <tr>
      <th class="small-12" style="padding-left:30px;padding-right:30px; padding bottom:15px; padding-top:10px; margin-right:-100pximportant;;left:0;right:0; max-width:inherit">
     <h1 style="color:#e41e26; font-size:1.35rem; font-weight:500">Visit NRTC at Booth #363 at TechAdvantage 2018</h1>
     <p style="font-family: 'Lato', sans-serif; font-size:1.1rem; line-height:1.8em;">See what our Demand Management partners<strong>&mdash;Nest, Aquanta,</strong> and <strong>DVI</strong>&mdash;can do for you</p>
      </th>
  </tr>
</table>

答案

您应该添加box-sizing: border-box;以将元素的填充和边框包含在宽度中，这对于100%使用像width这样的百分比值时尤其有用。否则（在这种情况下）宽度将超过100％，这将溢出。