Получить элемент sbling html для захвата всего родительского контейнера с помощью css

Question

Когда код ниже запущен в этом fiddle, элементы «.title-wrap» и «.bg-wrap» появляются рядом. Может ли кто-нибудь сказать мне, как это сделать, «.bg-wrap» автоматически занимает всю полноту «.wrap» с минимальными изменениями css.

HTML:

<div class="wrap selected"> 
     <div class="title-wrap"></div> 
     <div class="bg-wrap"></div> 
</div>   

CSS:

.selected .title-wrap{ 
    position:initial !important; 
    text-align: center; 
    height:29.42px; 
    animation:titleAnimation .2s; 
     -webkit-animation:titleAnimation .2s; 
     -webkit-animation-fill-mode: forwards; 
} 

@-webkit-keyframes titleAnimation 
{ 
from {left:85px;top:5px} 
to {left:25px;top:5px} 
} 

.wrap .title-wrap{ 
    width:202px; 
    display:block; 
    position:absolute; 
    top:5px; 
    left:85px; 
    background:black; 
} 


.selected .bg-wrap{ 
    background:green; 
    height:700px; 
    width:100%; 
    animation:bgAnimation .2s; 
     -webkit-animation:bgAnimation .2s; 
     -webkit-animation-fill-mode: forwards; 
} 

@-webkit-keyframes bgAnimation 
{ 
from {left:85px;top:35px;} 
to {left:205px;top:0px;} 
} 

.wrap .bg-wrap{ 
    display:block; 
    position:absolute; 
    top:35px; 
    left:85px; 
} 

Answer 1

Не положительны на то, что вы пытаетесь достичь, но я думаю, что у меня есть решение. Я также очистил ваш код, теперь он сокращен и легче читать. Я также обновил использование кросс-браузера. Вот обновленный JSFiddle с необходимыми исправлениями: http://jsfiddle.net/mLh7r/34/

HTML:

<div class="wrap selected"> 
    <div class="title-wrap titleAnimation"></div> 
    <div class="bg-wrap bgAnimation"></div> 
</div> 

CSS:

@-webkit-keyframes titleAnimation {from{left:85px;top:5px}to{left:25px;top:5px}} 
@-moz-keyframes titleAnimation {from{left:85px;top:5px}to{left:25px;top:5px}} 
@keyframes titleAnimation {from{left:85px;top:5px}to{left:25px;top:5px}} 

@-webkit-keyframes bgAnimation {from{left:85px;top:35px;}to{left:0px;top:0px;}} 
@-moz-keyframes bgAnimation {from{left:85px;top:35px;}to{left:0px;top:0px;}} 
@keyframes bgAnimation {from{left:85px;top:35px;}to{left:0px;top:0px;}} 

.titleAnimation { 
    -webkit-animation: titleAnimation ease-in 1s; 
    -moz-animation: titleAnimation ease-in 1s; 
    animation: titleAnimation ease-in 1s; 

    -webkit-animation-fill-mode: forwards; 
    -moz-animation-fill-mode: forwards; 
    animation-fill-mode: forwards;  
} 
.bgAnimation { 
    -webkit-animation: bgAnimation ease-in 1s; 
    -moz-animation: bgAnimation ease-in 1s; 
    animation: bgAnimation ease-in 1s; 

    -webkit-animation-fill-mode: forwards; 
    -moz-animation-fill-mode: forwards; 
    animation-fill-mode: forwards;  
} 
.wrap .title-wrap, .wrap .bg-wrap { 
    position: absolute; 
    display: block; 
    left: 85px; 
} 
.title-wrap { 
    position:absolute !important; 
    text-align: center; 
    height:29.42px; 
} 
.bg-wrap { 
    height:700px; 
    width:100%; 
    background:green; 
    z-index: -1; 
} 
.wrap .title-wrap { 
    width:202px; 
    top:5px; 
    background:black; 
} 
.wrap .bg-wrap { 
    top:35px; 
}