将 div 的宽度装入另一个 div 左右填充的宽度

Question

我必须 divs。 div 外面有左右填充。 div里面的宽度是100%，但是这个100%不包括padding left和right。
示例：

<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>

我的目标是，蓝色 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>元素是一个块元素，它默认占据其父容器的整个space，所以你不需要在内部[=25]上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>

将 div 的宽度装入另一个 div 左右填充的宽度

Fit width of a div inside another div that has padding left and right

html

css

width