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

Question

我很难解决这个问题，基本上我有3列：导航栏（深灰色），主要内容（深红色）和侧边栏（深绿色），导航栏可以展开和缩小，侧边栏可以滑动out并滑入（因此将宽度从0更改为某些内容并返回0）。我希望保持所有这些响应。想法是在扩展导航栏和侧边栏中的一些或两者时相应地缩小主要内容。不幸的是，我只能想到这样做是将主要内容的宽度更改为width: calc(100% - navbar width - sidebar width)，但是当我需要检查sidbar是扩展还是导航栏，或者两者都没有扩展等时，这真的很冗长...

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

我认为可以在某种程度上使用flexbox，但是无法弄明白。

让例子为

<nav> </nav>
<main> </main>
<aside> </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;
}

Answer 2

一个流行的解决方案是将所有这些元素放在一个包含位置的包装中：相对或甚至将设置主体放置到position：relative，以及位置内的所有元素：absolute。然后您可以按如下方式设置每个元素：

.navbar {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 50px;
}

.main-content {
    position: absolute;
    top: 0px;
    left: 50px;
    bottom: 0px;
    right: 150px;

 }

.sidebar {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width: 150px;
 }

当然容器元素需要有一定的高度才能工作。