位置絕對定位的父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

回答

相關問題