如何使div适合所有的宽度？

Question

我有一个用css设计的html div，这个div包含一些数据（一个字符串），虽然设置div宽度与另一个div的宽度相同（25％），但div只包含文本写在里面，而另一个div完全符合指定区域。

有问题的div：

 .item_name {
    background-color: #F30;
    position: absolute;
    height: 15%px;
    width: 25%px;
    background-repeat: repeat;
    background-position: center center;
    top: 0px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 18px;
    line-height: 35px;
    color: #FFFFFF;
}

另一个div：

 .item_block {
    background-origin:content-box;
    background-color:#FFECC1;
    height: 20%;
    width: 25%;
    line-height: 450px;
    font-family: Arial, Helvetica, sans-serif;
    text-indent: 0px;
    vertical-align: middle;
    text-align: center;
    position: relative;
    float: left;
    margin-top: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-left: 5px;

}

这是JSfiddle包含我的代码

Answer 1

我认为这一直是问题所在：

 height: 15%px;
 width: 25%px;

课程.item_name中的

将其更改为

 height: 15%;
 width: 25%;

并将此添加到您的css：

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}

这应该与父元素具有维度集一样，孩子将在%age中继承它！