由父div确定子div大小

Posted 2023-05-10

我在一个div中嵌套了好几个div，要求自适应，要怎么样在子div中用%数值来定义其对于父div的大小和位置呢？几个div之间位置关系应该怎么设置？绝对还是相对？
我搞不太清楚，多嵌套了几个之后相对位置就出错了，求帮忙

参考技术A 如果用绝对位置的话，就不是子div了，相对于父div已经是一个独立的div了追问

比如我有个大的div，我分别要在右上左下和右下再出3个小的div，具体要怎么设计呢？大的我可以自适应，但是小的和大的自适应的时候我出了很多问题，小的不跟着走。。。我三个小的都想保持比例

响应时，子div超过父div

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

问题的例子：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％，这将溢出。