html - 高さ100％のdivで垂直に整列

Question

これが私の状況です。ページ全体を2つのDIVで埋めるページを作成しようとしています（高さ100％、幅50％）。また、DIVのコンテンツは垂直方向に中央に配置されます。

ハックやJavaScriptなしでこれを達成する簡単な方法はありますか？

私はもう試したbody,html{height:100%;} .mydiv {display:table-cell;height:100%;vertical-align-middle}

しかし、それは機能しません...そしてそのコードでは、パーセンテージではなくピクセル単位で幅を指定する必要があります

Answer 1

ライブデモ

解決策への提案を示すjsFiddleを作成しました。<div>ここでは、2つのsがそれぞれ幅の50％、高さ100％を埋め、コンテンツを中央に垂直に配置する必要があることを考慮に入れています。これは、ソースコードを使用した簡略化された作業ソリューションです。

HTML

<div id="outer">
    <div id="table-container">
        <div id="table-cell">
            This content is vertically centered.
        </div>
    </div>
</div>

CSS

#outer {
    position:absolute;
    top:0;
    left:0;
    width:50%;
    height:100%;
}

#table-container {
    height:100%;
    width:100%;
    display:table;
}

#table-cell {
    vertical-align:middle;
    height:100%;
    display:table-cell;
    border:1px solid #000;
}

参考までに、このチュートリアルを使用しました。

Answer 2

position: absolute;
top: 0;
bottom: 0;

100％の高さまで満たされるボックスが表示されます。HTMLタグとBODYタグが十分に大きいことを確認してください。

html, body {
  height: 100%;
}

Answer 3

このタイプのデザインが必要ですか？=>フィドルの例