Question

我想使用CSS（而不是JavaScript）将具有位置：绝对 完全的子DIV放入其位置：relative parent。这是问题的确切部分。

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

关键是我已经为孩子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的底部边缘适合他们的父母ala上/左/右边距。我发现了很多一般的讨论，但没有一个专门解决如何在他们的父母中获得子DIV的底部边缘。

Answer 1

你绝对定位的孩子周围有1px的边框：

border: solid 1px #33bb88;

这是溢出的来源。

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

您可以使用CSS calc()函数使元素精确拟合：

height: calc(100% - 2px);

OR

调整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;

}

参考文献：

Answer 2

删除height:100%;

并添加

top:0px;
bottom:0px;

你们都已经准备好了。完全跨浏览器兼容

Answer 3

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

HTML：

services.AddDbContext<Data.Models.AC_MCLContext>(options =>
               options.UseSqlServer(connection).UseRowNumberForPaging());

和CSS：

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

点击here进行演示

在相对定位的父DIV中完全适合DIV * *？

3 个答案: