css - 如何使这个内部 div 拉伸(stretch)到 100% 宽度？

Question

我有一个 header 和两个 div 元素。外部 div 在我的 header 元素中垂直居中。我希望内部 div 拉伸(stretch)到 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，它 没有拉伸(stretch) 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