0

可変サイズのコンテンツを保持するには、コンテナの幅の最小の高さが必要ですが、同時に、コンテンツを親コンテナ内で垂直に配置する必要があります。

JSフィドル： http： //jsfiddle.net/mr_goodcat/n5Pq3/6/

HTML：

<table class="mainLayout">
    <tr>
        <td>
            <div class="contentLayout">
                <div class="tbl">
                    <div class="tcell">
                        <div class="inner">
                            CONTENT
                        </div>    
                    </div>
                </div>
            </div>
        </td>                             
    </tr>
    <tr>
        <td>
            BOTTOM
        </td>          
    </tr>
</table>

CSS：

body, html {
  background-color: lightgreen;
  height: 100%;
  width: 100%;
}

.mainLayout {
    height: 100%;
    width: 100%;
}

.contentLayout {
    width: 100%;    
    min-height: 200px;    
    border: 1px solid red;   
    display: block;
}

.tbl {
     height: 100%;
    width: 100%;
    display: table;
}

.tcell {
    width: 100%;
    height: 100%;
    background: purple;
    display: table-cell;    
    text-align: center;
    vertical-align: middle;
}

.inner {
    display: inline-block;    
}

赤い四角（最小の高さのコンテナ）の内側に紫色のボックスを配置したい。それ、どうやったら出来るの？

4

1 に答える 1

2

これを試してくださいhttp://jsfiddle.net/n5Pq3/30/これはWebkitの既知の問題です。回避策は使用することです

position:relative; //on parent 

position:absolute; // on child

詳細を調べてから、このリンクをたどってください... https://bugs.webkit.org/show_bug.cgi?id=26559

于 2012-12-24T15:49:32.110 に答える