позиция Абсолютный div внизу Абсолютного позиционированного родительского div

У меня есть абсолютное значение «header_main» с высотой 100%, чтобы в основном покрыть весь экран. Внутри header_main div n есть еще один div, который также является абсолютным. Я установил div-обводку «icon-wrapper» внизу: 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

только опечатка здесь ... нет в моем коде –

извините, что .... :-) –

Это может быть сделано путем предоставления сверху: 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

Вы должны установить ширину абсолютного позиционируется дел.

.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 только потому.

Используйте оболочку для только абсолютное позиционирование, и добавить еще один элемент для обработки вертикальной Align:

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

ответ

Смежные вопросы