Css 将绝对div定位在绝对定位父div的底部_Css

Css 将绝对div定位在绝对定位父div的底部

css

Css 将绝对div定位在绝对定位父div的底部,css,Css,我的“header_main”绝对定位，高度为100%，基本覆盖整个屏幕。在收割台内，主div n也有另一个div定位为绝对值。我已将“图标包装器”div设置为底部：0；但它不想定位绝对底部 <body id="top" class="no-js"> <header id="header_main"> <div class="icon-wrapper"></div> </header> </body> 您需要设置绝对

我的“header_main”绝对定位，高度为100%，基本覆盖整个屏幕。在收割台内，主div n也有另一个div定位为绝对值。我已将“图标包装器”div设置为底部：0；但它不想定位绝对底部

<body id="top" class="no-js">
<header id="header_main">
   <div class="icon-wrapper"></div>
</header>
</body>

您需要设置绝对定位div的宽度

.icon-wrapper {
    position:absolute;
    height: 254px;
    bottom: 0;
    vertical-align:bottom;
    width: 100%;
}

这可以通过给出top:100%来实现；对于图标包装，它将始终位于标题的底部。请查看下面的工作演示

#标题uu主{
身高：100%；
宽度：100%；
位置：绝对位置；
背景：ddd；
}
.图标包装{
位置：绝对位置；
高度：254px；
底部：0；
背景：红色；
最高：100%；
垂直对齐：底部对齐；
}

向下滚动ww

.icon wrapper

正在与底部对齐，但其内容没有对齐，因为绝对定位元素的显示值和

仅垂直对齐

仅将包装器用于绝对定位，并添加另一个元素来处理垂直对齐：

CSS

.icon-wrapper {
  position: absolute;
  bottom: 0;
}

.icon {
  display: table-cell;
  vertical-align: bottom;
  height: 254px;
}

HTML

<div class="icon-wrapper">
  <div class="icon">
  </div>
</div>

@GavinWood是的，您可以。否则，除div的内容定义的宽度外，它将没有其他宽度。

<div class="icon-wrapper">
  <div class="icon">
  </div>
</div>