Html 让边栏占据内容的空间

我正试图找出如何最好地实现一个边栏，就像新的GooglePlus中的边栏一样

我正在使用ECSS

当侧边栏打开时，页面的“主要”内容的宽度减小，当侧边栏关闭时，它变为整页宽度

我正试图用ui路由器来实现这一点

这是我当前的设置：

<header>
    <div ui-view="header"></div>
</header>

<main ui-view="container"></main>

<footer>
    <div ui-view="footer"></div>
</footer>

---

使用

float:right

和

float:left

，然后使用

position:absolute

和

bottom:0

等参数将页脚定位在页面底部和左侧，设置所需的宽度。 然后用

背景色和文本标记div，以查看我在编码时到底发生了什么

所有内容都包装在
中，因为它位于左侧栏和内容中

如果我不能更好地解释，我很抱歉


main{
宽度：100%；
位置：相对位置；
身高：100%；
}
.导航{
宽度：20%；
浮动：左；
背景：黑色；
颜色：白色；
高度：100px；
}
.内容{
宽度：80%；
浮动：对；
背景：红色；
颜色：白色；
高度：100px；
}
页脚{
位置：绝对位置；
背景颜色：绿色；
颜色：白色；
底部：0；
左：0；
宽度：100%；
高度：50px；
}

此div为7列宽，由5列向右推。
AAAAA
这并没有考虑到当侧栏关闭时，内容必须全屏显示，正如您在这里看到的：如果您正在使用MaterializeCSS，则侧栏导航已准备就绪：
<main>
    <div class="navigation" ng-hide="shownav"><span class="flow-text">This div is 7-columns wide on pushed to the right by 5-columns.</span></div>
    <div class="content" ui-view="container"></div>
</main>

main {
    width: 100%
}
.navigation {
    width: 20%;
    float: left;
}
.content {
    min-width: 80%;
    float: left;
}