2つの静的DIVの間の動的サイズのテキストボックス

Question

私の中間の列の幅全体にまたがるテキストボックスを作成しようとしています。 divの下に落としても、テキストボックスの幅を100％に設定すると、いつでも良いように見えます。中間のDIVに含まれるテキストボックスを保持し、中間のDIVの100％にするにはどうすればよいですか？

HTML

<div class="leftsidebar">a</div> 
<div class="rightsidebar">b</div> 
<div class="content"> 
    <div> 
    <input type="text" style=""/> 
    </div> 
</div> 

CSS

.leftsidebar { width: 60px; background:red; float:left; } 

.rightsidebar { background:blue; width: 170px; float:right; } 

.content { width: auto;background:yellow; } 

.content input[type='text'] { width: 100%; } 

http://jsfiddle.net/v0mp0wgm/

Answer 1

あなたはflexboxを使用してこれを達成することができます。最初に、あなたのコンテンツに含まれるdivを作成し、display: flex;に割り当てたいとします。その後、左サイドバーと右サイドバーの間に.content divを移動して浮動小数点数を削除します。次に、.contentと.content input[type='text']クラスの幅に100%;の幅を与えてください。

.container { 
 
    display: flex; 
 
} 
 

 
.leftsidebar { width: 60px; background:red; } 
 

 
.rightsidebar { background:blue; width: 163px;} 
 

 
.content { width: auto; background:yellow; width: 100%; } 
 

 
.content input[type='text'] { width: 100%; }

<div class="container"> 
 
    <div class="leftsidebar">a</div> 
 
    <div class="content"> 
 
    <div> 
 
     <input type="text" style=""/> 
 
    </div> 
 
    </div> 
 
    <div class="rightsidebar">b</div> 
 
</div>

JSFiddle

Answer 2

1つのオプションはすべてにfloat:leftを適用して使用することですcalc()：

.leftsidebar { 
 
float:left; 
 
width: 60px; 
 
background:red; 
 
} 
 

 
.content { 
 
float:left; 
 
width: calc(100% - 60px - 170px); 
 
background:yellow; 
 
} 
 

 
.rightsidebar { 
 
float:left; 
 
width: 170px; 
 
background:blue; 
 
} 
 

 
.content input[type='text'] { 
 
display: block; 
 
width: 100%; 
 
}

<div class="leftsidebar">a</div> 
 

 
<div class="content"> 
 
<div> 
 
<input type="text" /> 
 
</div> 
 
</div> 
 

 
<div class="rightsidebar">b</div>