两列div和宽度百分比

Question

我有问题使用width:100%,它不会拉伸到整个屏幕宽度,但如果我使用像素指定它,它将工作.我不明白它是如何工作的.我想使用百分比自动调整任何屏幕尺寸.

/*width: 600px; */    /* THIS WILL WORK */
width: 100%;           /*WON'T WORK*/ 

JSFiddle:http://jsfiddle.net/utBRH/9/

CSS:

    #wrapper{
        width:600px;
        height:600px;
        position:relative;
    }

    #search_box {   
        background-color:#050505;
        height:300px;
        /*width: 600px; */    /* THIS WILL WORK */
        width: 100%;           /*WON'T WORK*/ 
        display: table-cell;
        vertical-align: middle;
        text-align: center;

    }

    #btn_search_orange{
     display: inline-block;
      width: 40%;
      height: 80%;
      text-align: left;
      background-color:#e47700;
    }

    #btn_search_black{
      display: inline-block;
      width: 40%;
      height: 80%;
      text-align: left;
      background-color:#555454;

    }

Answer 1

为了使其工作,您需要分配display: table;和width: 100%;父元素,因为子元素设置为display: table-cell;

#wrapper{
    height:600px;
    position:relative;
    display: table;
    width: 100%;
}

演示

注意:我没有找到任何合理的理由使用display: table;,因为您可以轻松地使用浮动实现相同的功能.