html - 保留中间 1024px 并拉伸(stretch)侧栏以填充页面？

Question

如何拉伸(stretch)侧面的 div 以填充页面？

http://jsfiddle.net/p94vxnp2/1/

        <style>
            #page_body_table {
                display: table;
                width: 100%;
                vertical-align: center;
            }

            #page_body_left {
                display: table-cell;
                max-width: 100%;
                border: 1px solid black;
            } 

            #page_body_middle {
                display: table-cell;
                max-width: 1024px;
                border: 1px solid black;
            }

            #page_body_right {
                display: table-cell;
                max-width: 100%;
                border: 1px solid black;
            }

            @media screen and (max-width: 675px) {
                #page_body_left, #page_body_right {
                    display: none;
                }
            }
        </style>
        <center>
            <div id="page_body_left">
                left
            </div>
            <div id="page_body_middle">
                this is content of page
            </div>
            <div id="page_body_right">
                right
            </div>
        </center>

Answer 1

要使 display:table-cell 工作，您必须将 display:table 放到它的父级。

在您的情况下，将 display:table 添加到 #page_body