如何强制具有 100% 宽度的绝对位置以适应具有填充的父 div？答案

【问题标题】：How to force position absolute with 100% width to fit into parent div with padding?如何强制具有 100% 宽度的绝对位置以适应具有填充的父 div？
【发布时间】：2015-03-07 17:42:43
【问题描述】：

我有 2 个 div，一个外部 div 是父 div 和一个子 div。外部 div 是相对位置，左右填充 20px，而孩子是绝对位置，宽度为 100%。如何强制绝对位置的孩子在父级内，即尊重填充 20px（在父级内部和 20px 填充内）

我在这里做了示例：http://www.bootply.com/nyGZzTVY8v

我已阅读有关 box-sizing 的信息，但我仍然不明白如何正确实现它。尝试将其放在 box1 类上，但没有任何反应，尝试将其放在 box2 类上，也没有任何反应。

提前致谢。

附加说明：它必须是响应式的，即我不知道父 div 的大小，因此子 div 的 100%。

【问题讨论】：

不，在您的示例中不是 2 个 div。 1 个 div，1 个 p 和 1 个 a。

标签： html css

【解决方案1】：

只需设置left: 20px; 和right: 20px; 并删除width: 100%

Live Demo

.box2 {
    position: absolute;
    padding: 50px 0;
    color: #000;
    background: #fff;
    left: 20px;
    right: 20px;
    border: solid thin #06F;
}

或添加left: 20px; 和calc function width: calc( 100% - 40px )

.box2 {
position: absolute;
width: calc( 100% - 40px );
padding: 50px 0;
color: #000;
background: #fff;
left: 20px;
border: solid thin #06F;
}

live Demo

【讨论】：

Left: 0 将适合父框，但不考虑父填充间距。我实际上希望 box2 在 box1 内并尊重填充。还是谢谢。
@StrangeLove 使用左右bootply.com/QfXswy7K9f 或calc 函数见bootply.com/bEE3IHKMVg。
非常感谢 calc 解决了这个问题。我认为 box-sizing 可以解决问题。现在学习一些新东西。谢谢。
为我工作。谢谢

【解决方案2】：

如果它必须是响应式的，您可以将填充添加为边距，然后使用 calc 作为宽度：

.box2 {
    position: absolute;
    width: calc(100% - 40px);
    left: 0px;
    padding: 50px 0;
    margin: 0 20px;
    colour: #000;
    background: #fff;
    border: solid thin #06F;
}

【讨论】：

对不起，它会响应，我只是展示整个设计的一部分。
是否需要将第二个div位置设为绝对？
是的，我需要它，因为稍后我需要它固定在一个位置并在浏览器调整大小时自行调整大小。一切都很好，除了孩子那令人讨厌的额外空间。我知道我可以将 100% 降低到 95% 左右，但我认为这不是正确的解决方案。
非常感谢 calc 解决了这个问题。我认为 box-sizing 可以解决问题。现在学习一些新东西。谢谢。

【解决方案3】：

这很完美，试试吧。父 div 应该有一个相对位置，子 div 可以有一个你想要的绝对位置。

.box1 {
    width: 50%;
    margin: 10px;
    position:relative;
}
.box2 {
    display: block;
    position: absolute;
    width: 100%;
}

【讨论】：

【解决方案4】：

一旦你使用绝对位置，div 就不会在它的父 div 中。相反，你可以使用相对位置并给它width:inherit 这将继承父 div 的宽度

【讨论】：

抱歉，继承不能这样工作。如果没有定义溢出则无效。

【解决方案5】：

我最近遇到了这个问题，通过设置子容器的左右解决问题找到了解决方案。

如果您希望子容器具有相同的父填充，例如 padding: 0 10px 即左右。然后我们需要将子容器的左右设置为与父填充相同的值。

.box1 {
  position: relative;
  padding: 0 10px;
}
.box2 {
  position: absolute;
  left: 10px;
  right: 10px;
}

查看代码笔 click here

【讨论】：