html - 三个并排不同宽度的div，左右固定

Question

我有这个 HTML:

<div id="container">
    <div id="left">

    </div>

    <div id="middle">

    </div>

    <div id="right">

    </div>
</div>

和 CSS:

#container{
    width: 1000px;  
    position: relative; 
    background-color: yellow; 
    margin-left: auto; 
    margin-right: auto;
}

    #left{
        width: 200px; 
        height: 50px;  
        position: fixed; 
        float: left; 
        background-color: blue;
    }

    #middle{
        width: 200px; 
        height: 5000px; 
        margin-left: 30px; 
        float: left; 
        background-color: red;
    }

    #right{
        width: 500px; 
        height: 50px;  
        position: fixed; 
        float: right; 
        background-color: green;
    }

我只想让中间的div在高于屏幕的时候滚动，我该怎么做？我已经搜索过类似的问题，但没有找到这个具体问题。

Answer 1

#container{
    width: 100%;  
    position: relative; 
    background-color: yellow;
}

    #left{
        width: 33.3%; 
        height: 50px;  
        position: fixed;
        left: 0;
        top: 0;
        background-color: blue;
    }

    #middle{
        width: 33.3%; 
        height: 5000px; 
        margin: 0 auto; 
        background-color: red;
    }

    #right{
        width: 33.3%; 
        height: 50px;  
        position: fixed;
        right: 0;
        top: 0;
        background-color: green;
    }

<div id="container">
    <div id="left">

    </div>

    <div id="middle">

    </div>

    <div id="right">

    </div>
</div>