使用百分比布局，但侧边栏的最小和最大宽度等

Question

我想弄清楚如何进行布局，其中有一个 Main 区域，包含页面的核心内容，以及一个 Sidebar，包含用于导航、搜索等。见下图。

我正在使用带有自定义主题的 Bootstrap 3.3.1 (http://getbootstrap.com/)。该设计在大多数页面上都是完全响应的，只有少数例外。在空间有限的智能手机和小屏幕设备上，侧边栏会折叠成可展开的菜单，但这不是问题。

我的志向是：

• 主要区域的宽度应自动调整，即屏幕缩放和调整大小。不过，min-width: 320px.
• 侧边栏的宽度应该是width: 18%，但是，min-width: 300px;和max-width: 420px;。

到目前为止，我已经尝试使用纯div 标签获得这个结果，但没有任何东西能满足我的要求。

• 浮动 div： 我尝试在 sidebar 和 ma​​in 元素上使用浮动 div 标签和边距（参见：http://jsfiddle.net/euxc0593/1/）。然而，事实证明这是不可行的，因为其中一个 div 内的 clear: both 也会清除元素外的两侧，除非指定了 overflow: hidden。然而，overflow: hidden 上所说的div 标签是一个不可接受的限制，因为它会切断例如box-shadow、边框和包含在 div 中的自定义工具提示。另外，我个人的偏好和经验是float 是邪恶的，除非在图像上使用以将文本很好地环绕在它们周围。当然，各种网格系统（例如 Bootstrap 和 http://960.gs/）都在努力使用它，但是这些通常用于静态宽度的网站，并且在用于具有最小扭曲的完全响应式设计时清楚地显示出它们的弱点。这是一个“非此即彼”的困境。
• inline-block：我也尝试使用display: inline-block。但是，这也充满了烦人的小怪癖。例如。 inline-block 在技术上将被视为文本，因此块之间存在间距，就像文本字符之间存在的间距一样（请参阅：http://jsfiddle.net/utxvkwtc/1/）。要解决此问题，父元素必须指定 font-size: 0;。但是，必须在 inline-block 元素上重新指定 font-size。但是现在从body 继承的font-size 被破坏了，这是不可取的（参见：http://jsfiddle.net/cnqegdxx/2/）。此外，我们不能在这些元素上指定min-width 或max-width，因为这会导致元素有时出现在不正确的位置，例如换行。
• 绝对/真实定位：另一个尝试是使用position: relative 和position: absolute。但是，这 - 再次 - 是不可取的，因为我不希望其他元素必然相对于父元素定位，例如 侧边栏。

因此，我现在已经开始使用table。我并不为此感到自豪，但它似乎是唯一可行的解​​决方案，因为在许多浏览器（比如“嗨”、Opera 和 Safari）中，弹性框还没有得到完全支持——甚至不能正常工作。

回到上面列出的插图和野心。如果使用table，如何做到这一点，以便尊重默认的width: 18% 以及min-width: 300px; 和max-width: 420px;？

• 我的尝试：http://jsfiddle.net/Lx1q8oxh/1/（值稍作更改以更好地适应 JSFiddle 窗口）

max-width 不受td.sidebar 的尊重，因为除非表是table-layout: fixed，否则此属性将不起作用；

如果你有一个很棒的解决方案，我很感兴趣！特别是如果您可以使用div 标签实现这一点，而无需引入 Javascript 代码！ :)

提前致谢。

TL;DR：我想要一个布局中的侧边栏，它有一个百分比宽度，但在 min-width 和 max-width 的像素范围内。

Answer 1

您可以使用 CSS 表格（不是 HTML 表格）并混合我在 cmets 中提到的各种属性。

html,
body {
  height: 100%;
}
.container {
  width: 90%;
  margin: auto;
  display: table;
  height: 100%;
  table-layout:fixed;
}
.sidebar {
  width: 18%;
  max-width: 420px;
  min-width: 300px;
  display: table-cell;
  background: #f06d06;
}
main {
  display: table-cell;
  background: rebeccapurple;
}

<div class="container">
  <div class="sidebar"></div>
  <main></main>
</div>