[英]How do I make this inner div stretch to 100 % width?
I have one header
, and two div
elements. 我有一个header
和两个div
元素。 The outer div
is vertically centered in my header
element. 外部div
在我的header
元素中垂直居中。 I want the inner div
to stretch to 100% width. 我希望内部div
拉伸到100%的宽度。 How do i do this? 我该怎么做呢?
Check this fiddle for reference. 检查此小提琴以供参考。 I want the blue section to take up 100 % of the total width. 我希望蓝色部分占总宽度的100%。
Here's the code aswell: 这也是代码:
HTML: 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: 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%;
}
Add the following to the #header-index rule: 将以下内容添加到#header-index规则中:
display:table;
width:100%;
The issue is that #header-index-inner
is display: table-cell
, and it is not stretching 100%. 问题是显示的是#header-index-inner
display: table-cell
, 它没有伸展100%。
The parent needs to be assigned display: table
, as well as width 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%;
}
Instead of changing the display to use tables and table cells, you can use positioning to center the inner div with: 不用将显示更改为使用表格和表格单元格,而是可以使用定位将内部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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.