установить абсолютное DIV внутри прокрутки DIV

Question

HTML код

<div class="parent"> 
    <div class="normal"> 
    a<br />a<br />a<br />a<br />a<br />a... 
    </div> 
    <div class="abs"></div> 
</div> 

CSS код

.parent { 
    width:170px; height:300px; border:1px solid #000; 
    overflow:auto; position:relative; 
} 
.normal {} 
.abs { 
    height:40px; position:absolute; bottom:0; 
    background-color:gray; width:100%; 
} 

Как исправить .abs дел до дна .parent DIV?

Answer 1

Вы должны установить родительский DIV в

position:relative; 

Или поправьте меня, если I'am неправильно.

Answer 2

HTML

<div class="parent"> 
    <div class="normal"> 
     a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br /> 
     <div class="abs"></div> 
    </div> 
</div> 

CSS

.parent {width:170px; height:300px; border:1px solid #000; overflow:auto; position:relative} 
.normal { position:relative; padding-bottom: 40px; } 
.abs {height:40px; position:absolute; bottom:0; background-color:gray; width:100%} 

DEMO

Answer 3

Я думаю, что это может быть то, что вы хотите:

Ваш оригинальный HTML был такой:

<div class="parent"> 
    <div class="normal"> 
    a<br />a<br />a<br />a<br />a ... a<br />a<br />bottom 
    </div> 
    <div class="abs"></div> 
</div> 

и для CSS, попробуйте следующее:

.parent { 
    width:170px; 
    height: 340px; 
    border:1px solid #000; 
    position:relative 
} 
.normal { 
    overflow:auto; 
    height: 300px; 
} 
.abs { 
    height:40px; 
    position:relative; 
    bottom: 0px; 
    background-color: rgba(123, 123, 123, 0.4); 
} 

Вы хотите, чтобы текст прокрутки, поэтому установите overflow: auto в .normal блок контейнера.

Ваш .parent имеет фиксированную высоту, поэтому отрегулируйте высоту .normal на общую высоту минус .abs.

См демо: http://jsfiddle.net/audetwebdesign/EbFXR/