如何使这个内部div伸展到100%宽度?

时间:2016-01-07 21:49:45

标签: html css html5

我有一个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%;
}

3 个答案:

答案 0 :(得分:1)

将以下内容添加到#header-index规则:

display:table;
width:100%;

答案 1 :(得分:1)

问题是#header-index-innerdisplay: 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

答案 2 :(得分:1)

您可以使用定位来使内部div居中,而不是更改显示以使用表格和表格单元格:

&#13;
&#13;
#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%);
}
&#13;
<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>
&#13;
&#13;
&#13;