html - 2つの列とフッターを備えた液体レイアウト

Question

2つの列と下部に固定フッターがある液体レイアウトを作成しようとしています。私はすでにここでいくつかの助けを借りています、そして私は上記の1つの例を持っています。

http://jsfiddle.net/kpDDM/18/

私の例の問題は、高さが固定されていることです。コンテンツdivを100％の高さに移動すると、コンテンツが崩壊します。

Answer 1

次のようなものが必要ですか：http：//jsfiddle.net/kpDDM/44/

HTML

<div class="all">
    <div class="content">
      <div class="left">&nbsp;</div>  
      <div class="right">&nbsp;</div>
    </div>
    <div class="footer"></div>
</div>

CSS

.all {
    position: relative;
    height: 100%;
    width: 100%;
}

body,html{
    height:100%;
}

.content {
    display:inline-block;
    height: 90%;
    width: 100%;
}

.left {
    display: inline-block;
    float: left;
    width: 60%;
    height: 100%;
    background-color: red;
}

.right {
    display:inline-block;
    float: left;
    width: 40%;
    height: 100%;
    background-color: blue;
}

.footer {
    display: inline-block;
    width: 100%;
    height: 10%;
    background-color: green;
}

説明

問題は、bodyタグ自体が100％ではないことです。あなたはそれを体に割り当てる必要があり、それからそれはうまくいくでしょう。上記の例では、コンテンツとフッターが高さの100％を共有していると仮定しました。90％+ 10％