Как сделать это внутреннее растяжение div до 100% ширины?

Question

У меня есть один header и два div элементов. Внешний div вертикально центрирован в моем элементе header. Я хочу, чтобы внутренний div растянулся до 100% ширины. Как мне это сделать?

Отметьте this fiddle для справки. Я хочу, чтобы синяя секция занимала 100% общей ширины.

Вот код как хорошо:

HTML:

<header id="header-index"> 
    <div id="header-index-inner"> 
     <div id="inner-div"> 

       <h1>Header</h1>    
       <h5>Subheader1 </h5> 
       <h5>Subheader2 </h5> 

     </div> 
    </div> 
</header> 

CSS:

#header-index{  
    background-color: red; 
} 

#header-index-inner{ 
    width: 100%; 
    display: table-cell; 
    vertical-align: middle; 
    height: 400px; 
} 

#inner-div{ 
    background-color:blue; 
    width:100%; 
} 

Answer 1

проблема заключается в том, что #header-index-inner является display: table-cell, и это не растягивается 100%.

Родитель должен быть назначен display: table, а также ширина 100%:

#header-index {  
    background-color: red; 
    display: table; 
    width: 100%; 
} 

#header-index-inner { 
    width: 100%; 
    display: table-cell; 
    vertical-align: middle; 
    height: 400px; 
} 

#inner-div{ 
    background-color:blue; 
    width:100%; 
} 

Updated Fiddle

Answer 2

Добавьте следующий к правилу # заголовок-индекса:

display:table; 
width:100%; 

Answer 3

Вместо того чтобы изменять дисплей для использования таблиц и ячеек таблицы, вы можете использовать позиционирование отцентрировать внутренний DIV с:

#header-index { 
 
    background-color: red; 
 
} 
 
#header-index-inner { 
 
    width: 100%; 
 
    height: 400px; 
 
} 
 
#inner-div { 
 
    background-color: blue; 
 
    top: 50%; 
 
    position: relative; 
 
    transform: translate(0%, -50%); 
 
}

<header id="header-index"> 
 
    <div id="header-index-inner"> 
 
    <div id="inner-div"> 
 
     <h1>Header</h1> 
 
     <h5>Subheader1 </h5> 
 
     <h5>Subheader2 </h5> 
 
    </div> 
 
    </div> 
 
</header>