Question

如何拉伸边div以填充页面？

        <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

摆脱所有max-width。将中间div设置为width:1024px并保留不带width的双边div。只要包装div为width: 100%;

，它们就会自动适合

http://jsfiddle.net/p94vxnp2/5/

Answer 2

要使display:table-cell正常工作，您必须将display:table添加到其父级。

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

Answer 3

如果你想要居中，你必须这样做：

.center-div {
    Margin: 0 auto 0 auto;
    Width: 500px;  for example
 }

你不必在旁边给div。

保持中间1024px和拉伸侧栏填充页面？

3 个答案: