html - 调整浏览器窗口大小时，避免调整 block 级元素的大小

Question

下面的示例使用 <div> 显示左右侧边栏和内容栏

#content {
    margin-left: 120px;
    margin-right: 120px;
    overflow: hidden;
}

#left {
    float: left;
    width:  120px;
}

#right {
    float: right;
    width:  120px;
}

HTML

<div id="container" style="border: 3px solid black;">
    <div id="left" style="border: 2px solid #008000;">Left</div>
    <div id="right" style="border: 2px solid #008000;">Right</div>

    <div id="content">
        <table style="width: 100%; height: 500px; border: 2px solid #F00;" rules="all">
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>

            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
        </table>
    </div>
</div>

当浏览器窗口调整大小时，内容中的表格<div>也调整了不应该发生的大小。不管怎样，调整浏览器窗口的大小应该不会影响它显示的内容。

如何避免调整内容栏的大小，以便在调整大小时浏览器窗口上只显示滚动条(内容应与页面加载时显示的内容保持相同)？

_{我试过给 display: inline-block至 content但这并不能正常工作。}

Answer 1

block 元素默认为视口(viewport)的 100% 宽度。

如果你不希望它们改变大小，分配一个width: min-width: 或 max-width: 给你自己的喜欢。