在另一个具有左右填充的div内适合div的宽度

Question

我必须要divs。外面的div有左右填充。 div里面的宽度为100％，但这些100％不包括左右填充 例如：

＆＃13;

＆＃13;

<div style="width:200px; height: 300px; padding-left:15px; padding-right:15px; background-color:green">
	<div style="width:100%; height:300px; background-color:blue">
<div>

＆＃13;

＆＃13;

＆＃13;

我的目标是，蓝色div变为绿色div的宽度。 我不想为蓝色留下100％的宽度，并在px中输入以保持响应式网站。 有HTML / CSS方式吗？

Answer 1

你可以试试这个：

<div style="width:200px; height: 300px; padding-left:15px; padding-right:15px; background-color:green">
	<div style="width: calc(100% + 35px); height:300px; background-color:blue; margin-left: -15px;">
<div>

Answer 2

<div>元素是一个块元素，默认情况下它占据其父容器的整个空间，因此内部div上不需要width:100%;。

为了使其全宽，您可以设置margin:0 -15px;（与容器上的padding值相同）。

<div style="width:200px; height: 300px; padding-left:15px; padding-right:15px; background-color:green">
    <div style="margin:0 -15px; height:300px; background-color:blue">
<div>