html - 使 div 宽度变为 max-width

Question

我有典型的 3 列布局，我需要它是流畅的 (ish)。元素的规范是:我们需要容器从 1024px 到 1440px 最大值(这很容易)。中心栏需要从 514(在 1024)到 626(在 1440)，两侧的侧边栏包含剩余的空间。

我没有看到解决这个问题的简单方法，我玩过 max-width 和 min-width 但由于 2 个断点处的比例不相同，我不能使用百分比宽度来制作列在更高的分辨率上填充空间。

这是我的代码:

<div id="container">
    <nav id="sidebar-left">Left</nav>
    <section id="page">Center</section>
    <div id="sidebar-right">Right</div>
</div>


#container{
    min-width:1024px;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    min-height: 100%;
}

#sidebar-left{
    min-width: 230px;
    max-width: 387px;
    float: left;
    background: red;
    height: 300px;
}
#sidebar-right{
    min-width: 230px;
    max-width: 387px;
    float: right;
    background: blue;
    height: 300px;
}
#page{
    min-width: 514px;
    margin: 0 20px;
    max-width: 626px;
    float: left;
    background: purple;
    height: 300px;
}

我还做了一个 fiddle :

https://jsfiddle.net/1y59nuxz/

我宁愿有一个纯 css 的解决方案，我很确定使用 jquery 或多或少容易解决，但我想知道使用它是否容易。

编辑:我需要它与 IE9+ 兼容

Answer 1

好的。您有多种解决方案来完成此任务。

一种解决方案是更改 html 中元素的顺序(如果可能):

<div id="container">
  <nav id="sidebar-left">Left</nav>
  <div id="sidebar-right">Right</div>
  <section id="page">
    <div class="page-inner">Center</div>
  </section>
</div>

对于“#page”，使用下一个 css 代码:

#page {
  overflow: hidden;
  height: 300px;
}

.page-inner {
  height: 100%;
  margin: 0 20px;
  background: purple;
}

示例代码:

#page {
    overflow: hidden;
    height: 300px;
}

.page-inner {
    height: 100%;
    margin: 0 20px;
    background: purple;
}

#container{
    min-width:1024px;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    min-height: 100%;
}

#sidebar-left{
    min-width: 230px;
    max-width: 387px;
    float: left;
    background: red;
    height: 300px;
}
#sidebar-right{
    min-width: 230px;
    max-width: 387px;
    float: right;
    background: blue;
    height: 300px;
}

<div id="container">
    <nav id="sidebar-left">Left</nav>
    <div id="sidebar-right">Right</div>
    <section id="page">
        <div class="page-inner">Center</div>
    </section>
</div>

您还可以检查 fiddle .

另一种解决方案是应用 flexbox。这是一种优雅而简单的方法。