有2个div填写页面的其余部分

Question

我目前正在网站上工作，但重要的是它必须适合每个页面。我有5个水平的div。中间的3个div是固定的尺寸，200px，400px，再次200px。现在，我有一个在最左边，最右边的一个，它应该是同样大的，并且无论您查看网站的分辨率如何，都会填充屏幕。所以中间的部分应该在中间，而2中间部分左侧和右侧的div应填写屏幕。我尝试了其他线程中解释的几种技术，但大多数只适用于左侧，或者仅适用于正确的部分，而不适用于左侧和右侧。也许有人有解决方案？

我的HTML

<div id="left"> 
test 
</div> 
<div id="buttonsleft"> 
test 
</div> 
<div id="middle"> 
test 
</div> 
<div id="buttonsright"> 
test 
</div> 
<div id="right"> 
test 
</div> 

我的CSS

#left{ 
    float:left; 
    background-color:#C00; 
    width:15%; 
    height:100%; 
} 
#buttonsleft{ 
    float:left; 
    background-color:#3F0; 
    width:200px; 
    height:100%; 
} 
#middle{ 
    float:left; 
    background-color:#30F; 
    width:400px;  
    margin:auto; 
} 
#buttonsright{ 
    float:left; 
    background-color:#3FF; 
    width:200px; 
    height:100%; 
} 
#right{ 
    float:left; 
    background-color:#300; 
    width:15%; 
    height:100%; 
} 

Answer 1

可以使用CSS表格布局可以轻松完成。 请参阅Working Fidde

如果视口小于1000px宽，则div会缩小。 [你没有指定，如果视口小于1000像素那么应该怎样happend]

HTML：

<div class="Container"> 
    <div id="left">left</div> 
    <div id="buttonsleft">buttonsleft</div> 
    <div id="middle">middle</div> 
    <div id="buttonsright">buttonsright</div> 
    <div id="right">right</div> 
</div> 

CSS：

* { 
    font-size: 25px; 
    color: white; 
} 
.Container 
{ 
    display: table; 
    width: 100%; 
} 
.Container > div 
{ 
    display: table-cell; 
} 
#left { 
    background-color:#C00; 
} 
#buttonsleft { 
    background-color:#3F0; 
    width:200px; 
} 
#middle { 
    background-color:#30F; 
    width:400px; 
} 
#buttonsright { 
    background-color:#3FF; 
    width:200px; 
} 
#right { 
    background-color:#300; 
}