css - 残りの幅全体を占める Div

Question

親 div とその中に 2 つの div があります。最初の子 div は幅 50 ピクセル、高さ 100% です。2 番目の子 div は高さ 100% で、残りの幅 ( 100% - 50px ) を取得するにはどうすればよいですか?

私が作成したフィドルは次のとおりです: http://jsfiddle.net/muGty/ 基本的に、青い div (右) が灰色のコンテナーの残りを完全に占有するようにします。

<div class="parent">
    <div class="left"></div>
    <div class="right"></div>
</div>

Answer 1

こんな感じですか？

<div id="left">
</div>
<div id="right">
</div>

CSS

html, body {
    height: 100%;
}

#left {
    width:200px;
    float:left;
    background: #f00;
    height: 100%;
}
#right {
    margin-left: 200px;
    background: #0f0;
    height: 100%;
}

アップデート：

CSS3 でプロパティを使用することもできcalc()ます。これにより、このプロセスが次のように容易になります。

html, body {
    height: 100%;
}

#left {
    width:200px;
    float:left;
    background: #f00;
    height: 100%;
}

#right {
    float: left;
    background: #0f0;
    height: 100%;
    width: calc(100% - 200px); /* Negate the fixed width element value from 100% */
}

デモ 2

Answer 2

正しいクラスを編集して、次のようにします。

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

Answer 3

右側の列の絶対位置を操作することもできます。次の例を検討してください。

.parent{
    width:100%;
    height:50px;
    background:#888;
    position:relative
}
.left{
    float:left;
    height:100%;
    width:50px;
    background:green
}
.right{
    background:red;
    position:absolute;
    bottom:0;
    left:50px;
    right:0;
    top:0
}

このFiddleも参照してください。position: relativeこれを飛ばすには、親コンテナに設定する必要があることに注意してください。