css - 内部にulがある場合、コンテナを親の100％にする方法

Question

私はマークアップを持っています:

http://jsfiddle.net/ZVXFD/85/

.step親コンテナの 100%を作成する必要があります。その方法を教えてください。html:

 <div class="steps-container">
        <div class="group">
            <div class="step">
                <ul class="sortable">
                    <li class="item">Item</li>
                    <li class="item">Item</li>
                    <li class="item">Item</li>
                    <li class="item">Item</li>
                    <li class="item">Item</li>
                </ul>
            </div>
            <div class="step">
                <ul class="sortable">
                    <li class="item">Item</li>
                    <li class="item">Item</li>
                    <li class="item">Item</li>
                    <li class="item">Item</li>
                    <li class="item">Item</li>
                    <li class="item">Item</li>

                </ul>
            </div>
            <div class="step">
                <ul class="sortable">
                    <li class="item">Item</li>
                    <li class="item">Item</li>
                </ul>
            </div>
        </div>

    </div>

CSS:

* {
    margin: 0px;
    padding: 0px;
}

ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    display: inline-block;
}

.sortable li {
    margin: 0px;
    padding: 0px;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background-color: lightgrey;
}


.group {
    display:inline-block;
    border: 1px solid red;
}

.step {
    border: 1px solid green;
    display:inline-block;
    background-color: yellow;
}

.item {
    background-color: lightgray;
}

Answer 1

position: relative;に設定できます.group

と

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;

に.step

一度に 1 つの要素のみを表示していると仮定していますが.step、間違っていますか?

Answer 2

http://jsfiddle.net/ZVXFD/94/

.group の幅を 100% にしたい場合は、次のスタイルが必要です。

.group {
    border: 1px solid red;
    display:table; /* make the element 100% fill the entire available width */
    width: 100%;
}

.step を同じ高さにするには、次のスタイルが必要です。

.step {
    border: 1px solid green;
    display:table-cell; /* make the element 100% of its parent's height/equal height columns */
    background-color: yellow;
}