在相对定位的父 DIV 中完全适合绝对定位的 DIV？答案

【问题标题】：Fit absolutely positioned DIV *completely* in relatively positioned parent DIV?在相对定位的父 DIV 中完全适合绝对定位的 DIV？
【发布时间】：2016-05-23 23:38:21
【问题描述】：

我想使用 CSS（而不是 JavaScript）将具有 position:absolute EXACTLY 的子 DIV 放入其 position:relative 父级。这正是问题所在。

如下图所示，子 DIV 非常适合父 DIV 的左/右和上边距，但超出父 DIV 的下边距（看起来是）1px。

关键点是我已经为子 DIV 尝试了各种 HEIGHT 组合。这种方法并不能真正解决问题，因为调整页面大小会使子 DIV 的下边距相对于其父级移动。所以我不认为解决方法是改变 HEIGHT 的值。

这是 CSS：

div.container{
  position: relative;
  background-color: #fafafa;
  margin: 2%;
  border: solid 2px orange;
  padding: 2%;
  height: 100%; /* Expands container to height of HTML & BODY */
}

div.leftSideNav,
div.rightSideNav
{
  height: 100%; /* Changing height doesn't seem to truly fix the problem */
  width: 1.5%;
  background-color: #ccffcc;
  margin: 0px;
  border: solid 1px #33bb88;
  padding: 0px;
  position: absolute;
  top: 0px;
  color: #333333;
}

div.leftSideNav{
  left: 0px;
  background-color: pink;
}
div.rightSideNav{
  right: 0px;
}

这是相应的 XHMTL：

<body>
  <div class="container">
   <div class="leftSideNav" />
   <div class="rightSideNav" />
  </div>
</body>

我已经绕圈子试验并试图让子 DIV 的底部边距适合其父级的顶部/左侧/右侧边距。我发现了很多一般性讨论，但没有一个专门解决如何在其父级中获取子 DIV 的底部边距。

【问题讨论】：

标签： html css

【解决方案1】：

您的绝对定位的孩子周围有一个 1px 的边框：

border: solid 1px #33bb88;

这就是溢出的来源。

height:100% + 1px + 1px = 2px overflow

您可以使用 CSS calc() 函数来使元素精确匹配：

height: calc(100% - 2px);

或

调整CSS Box Model 以在宽度/高度计算中包含填充和边框。默认值为box-sizing: content-box。请改用box-sizing: border-box。

div.leftSideNav,
div.rightSideNav
{
  height: calc(100% - 2px);    /* OPTION #1 */
  box-sizing: border-box;      /* OPTION #2 */
  width: 1.5%;
  background-color: #ccffcc;
  margin: 0px;
  border: solid 1px #33bb88;
  padding: 0px;
  position: absolute;
  top: 0px;
  color: #333333;

}

参考资料：

【讨论】：

这里有一个JSFiddle 来确认这个问题解决了！
更好的小提琴：jsfiddle.net/ydo1j3hu/2（更正了一些错误：div 节点和 css 中的错误注释）
height: calc(100% - 2px); 完美地完成了这项工作。谢谢

【解决方案2】：

删除height:100%;

并添加

top:0px;
bottom:0px;

一切就绪。完全跨浏览器兼容

【讨论】：

【解决方案3】：

添加 box-sizing 属性将解决您的问题。

HTML：

<div class="container">
   <div class="leftSideNav">
      <a class="arrow" href="#"><i class="fa fa-arrow-left"></i></a>
   </div>
   <div class="rightSideNav">
      <a class="arrow" href="#"><i class="fa fa-arrow-right"></i></a>
   </div>
</div>

和 CSS：

div.container { 
         position: relative;
         background-color: #fafafa;
         margin: 2%;
         border: solid 2px orange;
         padding: 2%;
         height: 100px/* Expands container to height of HTML & BODY */
}

div.leftSideNav,
div.rightSideNav {
          height: 100%; */ Changing height doesn't seem to truly fix the problem */
          background-color: #ccffcc;
          margin: 0px;
          border: solid 1px #33bb88;
          padding: 0px;
          position: absolute;
          top: 0px;
          color: #333333;
          box-sizing: border-box;
          vertical-align: middle;
          width: 25px;
}
div.leftSideNav {
          left: 0px;
          background-color: pink;
}
div.rightSideNav {
          right: 0px;
}
.arrow {
          font-size: 25px;
          color: #999;
          width: 25px;
          position: absolute;
          top: 50%;
          margin-top: -10px;
}
div.leftSideNav:hover .arrow,
div.rightSideNav:hover .arrow {
          color: #333;
}

点击here进行演示

【讨论】：