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

Question

我正在尝试弄清楚如何制作布局，其中包含主区域，其中包含页面的核心内容，以及补充工具栏，其中包含导航，搜索等。见下图。

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

我的抱负是：

• Main 区域的宽度应自动调整，即使用屏幕缩放和重新调整大小。但是，min-width: 320px。
• 补充工具栏的宽度应为width: 18%，min-width: 300px;和max-width: 420px;。

到目前为止，我已尝试使用纯div标记获取此结果，但没有任何内容符合我的要求。

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

所以，我现在已经开始使用position: absolute了。我并不为此感到自豪，但它似乎是唯一可行的解​​决方案，因为在许多浏览器中，灵活盒还没有完全支持 - 甚至工作正常 - 比如说“嗨，”Opera和Safari。

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

• 我的尝试：http://jsfiddle.net/cnqegdxx/2/（稍微更改了值，以便更好地适应JSFiddle窗口）

max-width: 420px;未尊重max-width，因为除非该表格为td.sidebar，否则此属性将无效;

如果你有一个很棒的解决方案我很感兴趣！特别是如果您可以使用table-layout: fixed标记实现此目的，而无需引入Javascript代码！ ：）

提前致谢。

TL; DR：我想在布局中使用侧边栏，其宽度为百分比，但在div和min-width像素范围内。

Answer 1

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

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>