缩放时，带有边距和填充的内部div最终超过外部div

Question

I have a div inside of another div. 我在另一个div内有一个div。 However, because of the margin and padding of the inner div, whenever you zooms in, the inner div exceeds the boundary of the outer div eventually. 但是，由于内部div的边距和填充，每次放大时，内部div最终都会超出外部div的边界。 This doesn't happen if the margin and the padding isn't included. 如果不包括边距和填充，则不会发生这种情况。 I'm wondering if there's a way to make it so that the inner div never exceeds the outer div, regardless of the margin and padding of the inner div? 我想知道是否有一种方法可以使内部div永远不会超过外部div，而与内部div的边距和填充无关。

body {
width: 1000px;
}
#inner {
border: 1px solid black;
height: 90%;
margin: 2%;
padding: 2%;
}
#outer {
border: 1px solid black;
width: 50%;
height: 50%;
}

<body>
<div id = 'outer'>
<div id = 'inner'>
</div>
</div>
</body>

Answer 1

You need to set box-sizing: border-box on your inner div so borders/paddings etc are included in the width. 您需要设置box-sizing: border-box内部div上的box-sizing: border-box ，以便在宽度中包括边框/填充等。

Actually you should do that to the outer div as well and instead of margins on the inner, set padding on the outer, to ensure everything will be included in the width. 实际上，您也应该对外部div进行此操作，而不是对内部div进行设置，而对外部div设置填充，以确保所有内容都包括在宽度中。

缩放时，带有边距和填充的内部div最终超过外部div

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-09-23 19:05:05

缩放时，带有边距和填充的内部div最终超过外部div

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-09-23 19:05:05

解决方案1
0 已采纳 2015-09-23 19:05:05