html - 仅使用 css3 的自适应宽度布局？

Question

我在弄清楚这一点时遇到了很多麻烦，基本上我有 3 列:导航栏(深灰色)、主要内容(深红色)和侧边栏(深绿色)，其中导航栏可以展开和缩小，侧边栏可以滑动滑出并滑入(因此将宽度从 0 更改为某个值，然后再返回到 0)。我想保持所有这些响应。想法是在扩展导航栏和侧边栏的部分或两者时相应地缩小主要内容。不幸的是，我能想到的唯一方法是将主要内容的宽度更改为类似 width: calc(100% - navbar width - sidebar width) 但是当我需要检查是否sidbar 或 navbar 已展开，或两者均未展开等...

这是一张说明主要内容如何收缩的图片:

我假设 flexbox 可以以某种方式在这里使用，但无法弄清楚。

让例子标记为

<nav> </nav>
<main> </main>
<aside> </aside>

注意:nav 和 aside 需要占页面高度的 100% 并且固定在适当的位置。

Answer 1

您可以为此使用flex-box。一个简单的方法如下:http://codepen.io/anon/pen/pgVVJb

您可以更改类以查看它如何更改布局。注意:我正在使用类来更改列的宽度，但您可以类似地使用 JavaScript 或静态 CSS。

代码转储:

<div class="container">
  <div class="small">Nav</div>
  <div>Content</div>
  <div class="medium">Sidebar</div>
</div>

html, body, div {
  height: 100%;  
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
}

.container div {
  flex: 1;
  border: 1px solid #ccc;
  background: gray;
}

.small {
  max-width: 50px;
}

.medium {
  max-width: 150px;
}