如何讓內部div伸展至100％寬度？

我有一個header，和兩個div元素。外部div垂直居中在我的header元素中。我想要內部div伸展到100％的寬度。我該怎麼做呢？如何讓內部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%; 
}

來源

2016-01-07 Marcus

[爲什麼寬度：100％無法在div {display：table-cell}上工作？]（http://stackoverflow.com/questions/17736570/why-is-width-100-not-working -on-DIV-顯示錶單元） – Sam

的問題是#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

來源

2016-01-07 21:53:41

添加以下的＃標題索引規則：

display:table; 
width:100%;

來源

2016-01-07 21:53:10 Sam

代替改變使用表格和表格單元的顯示的，可以使用定位居中內分度：

#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>

來源

2016-01-07 21:58:37 j08691

如何讓內部div伸展至100％寬度？

回答

相關問題