html - 让侧边栏占用内容空间

我正在尝试找出如何最好地实现侧边栏，例如新版Google plus中的侧边栏

我正在使用MaterializeCSS

其中页面的“主要”内容在侧边栏打开时宽度减小，而在侧边栏关闭时变为整个页面宽度。

我正在尝试使用ui路由器执行此操作。

这是我当前的设置：

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

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

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

每个元素都有对应的控制器。
我正在考虑为侧边栏创建一个新的控制器。

但是我似乎无法像我想要的那样进行这项工作：
这是我尝试的：

<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>

CSS：

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

最佳答案

使用float:right和float:left，然后使用position: absolute将页脚与bottom:0和left:0之类的参数一起放置在页面的底部和左侧，设置所需的宽度。
然后用background-colors和文本标记div，以查看在编码时发生的确切情况。

您所有的内容都包裹在<main>内，因为它是左栏和内容所在的位置。

如果无法更好地解释我很抱歉

main {
  width: 100%;
  position: relative;
  height: 100%;
}
.navigation {
  width: 20%;
  float: left;
  background: black;
  color: white;
  height: 100px;
}
.content {
  width: 80%;
  float: right;
  background: red;
  color: white;
  height: 100px;
}
footer {
  position: absolute;
  background-color: green;
  color: white;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
}

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

<main ui-view="container">


  <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">aaaaaa</div>
  </main>


</main>

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

关于html - 让侧边栏占用内容空间，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34135108/