有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; 
}