javascript - 如何在调整浏览器窗口大小时使固定宽度的div插入另一个具有相对宽度的div？

Question

我有一个包含 2 个 float div 的页面:一个用于页面内容，另一个用于小部件侧边栏。页面内容 max-width 设置为 70%，侧边栏的宽度为固定值 275px +padding。当我缩小我的页面(调整浏览器窗口大小)时，一切看起来都是正确的，直到侧边栏占用超过 30% 的空间并位于左侧 div 下方。

调整浏览器窗口大小时，是否可以让右侧的 div 保持其 275 像素的宽度并使其挤压左侧的 div，以便在必要时将最大宽度从 70% 降低到 5%？

如果你想看看我在说什么，这是我的测试网站:http://mywptestsite.is-great.org/page-height-and-sidebar/

#primary {
    float: left;
    clear: none;
    max-width: 70%;
    margin-right: 22px;
}

.sidebar .entry-header, 
.sidebar .entry-content, 
.sidebar .entry-summary, 
.sidebar .entry-meta {
    width: 100%;
    padding: 0 20px 0 50px;
}

.site-main #tertiary {
    float: right;
    clear: none;
    width: 256px;
    position: static;
    height: auto;
}

.site-main .widget-area {
    padding: 30px 20px 0 0;
    float: none;
    width: 100%;
}

Answer 1

我会为此使用 display: table 和 table-cell。

JSFiddle:http://jsfiddle.net/maximgladkov/M3wP8/

HTML

<div id="container">
    <div id="content">
        Content
    </div>
    <div id="sidebar">
        Sidebar
    </div>
</div>

CSS

#container {
    display: table;
    width: 70%;
    margin: 0 auto;
}

#content, #sidebar {
    display: table-cell;
}

#content {
    max-width: 70%;
    border: 1px solid blue;
}

#sidebar {
    width: 254px;
    border: 1px solid red;
}