Question

我正在试图弄清楚如何最好地实施侧边栏，例如新google plus中的边栏

我正在使用MaterialiseCSS

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

我正在尝试使用ui-router。

这是我目前的设置：

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

Answer 1

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

让侧边栏占据内容空间

1 个答案: