调整中间容器大小

Question

任何想法，我怎样才能调整窗口大小的中间红色容器，给定左右两个固定宽度的黑色容器？我知道我可以在jQuery中计算窗口宽度并应用于中间<div>，但我想知道是否还有另一个js-less解决方案。 Plnkr link here

<div id="wrapper"> 
    <div class="pull-left black"></div> 
    <div class="middle red"></div> 
    <div class="pull-right black"></div> 
</div> 

Answer 1

Flexbox的？

JSFiddle Demo

#wrapper { 
 
    max-width: 300px; 
 
    height: 40px; 
 
    display: flex; 
 
} 
 
.black { 
 
    flex: 0 0 40px; 
 
    background: #000; 
 
} 
 
.red { 
 
    flex: 1; 
 
    background: #f00; 
 
}

<div id="wrapper"> 
 
    <div class="black"></div> 
 
    <div class="red"></div> 
 
    <div class="black"></div> 
 
</div>

Answer 2

我会做这种方式： 比方说，你的黑色容器50像素。

.black{ 
    width: 50px; 
} 

然后你的红色容器是一些大小 - 2 * 50px。我不知道你想要什么尺寸，但对于这个例子，假设你需要它是全窗口宽度。那么你会这样做：

.red{ 
    width: calc(100vw - 100px); 
} 

希望这会有所帮助。