位置绝对定位的父div的底部的绝对div

我有我的“header_main”绝对定位高度为100％基本覆盖整个屏幕。在header_main div n中还有另一个div，它也是绝对定位的。我已将“图标包装器”div设置为底部：0;但它不希望定位绝对底部。位置绝对定位的父div的底部的绝对div

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

我的CSS：

html, body { 
height: 100%; 
} 

body{ 
    font: 18px/27px $font-stack; 
    color: $text-color; 
    -webkit-font-smoothing: antialiased; 
    font-weight: 300; 
} 

#header_main{ 
    height:100%; 
    width:100%; 
    position: absolute; 
    background: url('../images/ac-placeholder-img.jpg') no-repeat center center; 

    -webkit-background-size: cover; 
    -moz-background-size: cover; 
     -o-background-size: cover; 
      background-size: cover; 
} 
.icon-wrapper { 
    position:absolute; 
    height: 254px; 
    bottom: 0; 
    vertical-align:bottom; 
}

来源

2015-05-03 Gavin Wood

只是一个错字这里...不是在我的代码 –

对不起... :-) –

可以通过给予top来完成：100％;到图标包装它将永远在header_main的底部检查下面的工作演示;

#header_ main{ 
 
    height:100%; 
 
    width:100%; 
 
    position: absolute; 
 
    background:#ddd; 
 

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

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

来源

2015-05-03 12:29:57

-1

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

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

来源

2015-05-03 12:28:11 SkyNet

如果你定位底部，没有必要设置宽度。 –

@GavinWood是的，你会这样做。除此之外，它除了div的内容定义之外没有其他宽度。 –

.icon-wrapper被对齐于底部，但它的内容，因为只有绝对定位的元素is always table or block的显示值，并vertical-alignapplies to inline or table-cell elements不是。

使用只有绝对定位包装，并添加其他元素来处理垂直对齐：

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>

Fiddle

来源

2015-05-03 13:01:01

位置绝对定位的父div的底部的绝对div

回答

相关问题