html - CSS创建侧边菜单

Question

目前，我的 html 页面有 2 个 div，它们一个下一个地保存页面上的所有信息。现在我希望它们的左侧有一个横跨整个页面的侧边栏。

<div class="container">
    <div class="panel panel-primary">
        <!-- Default panel contents -->
        <div class="panel-heading">Group 1</div>
        <div class="panel-body">
            <div class='contentWrapper ng-cloak'>
                <div class='content'>
                    <ul class="thumbnails">
                        <p>
                            content
                        </p>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="panel panel-primary">
        <!-- Default panel contents -->
        <div class="panel-heading">Group 2</div>
        <div class="panel-body">
            <div class='contentWrapper ng-cloak'>
                <div class='content'>
                    <ul class="thumbnails">
                        <p>
                            content
                        </p>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

我通常会使用 bootstrap 网格模板来执行此操作，但是我使用的是 Angular 拖放库，并且使用它(出于某种原因)会在四处移动时弄乱动画。

在显示的两个 div 的左侧添加另一个 div 作为侧边菜单的最简单方法是什么？

Answer 1

你可以这样做:

.sidebar {
  background: #eee;
  width: 100px;
  height: 50px;
  margin-right: -100%;
  margin-bottom: 10px;
  position: relative;
  display: block;
  overflow: visible;
  float: left;
  box-sizing: border-box;
}
.page-content {
  background: #aaa;
  margin-left: 100px;
}

<div class="container">
  <div class="sidebar-wrapper">
    <div class="sidebar">
      SIDEBAR<br>
      AT LEFT;
    </div>
  </div>
  <div class="page-content-wrapper">
    <div class="page-content">
      <div class="panel panel-primary">
        <!-- Default panel contents -->
        <div class="panel-heading">Group 1</div>
        <div class="panel-body">
          <div class='contentWrapper ng-cloak'>
            <div class='content'>
              <ul class="thumbnails">
                <p>
                  content
                </p>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="panel panel-primary">
        <!-- Default panel contents -->
        <div class="panel-heading">Group 2</div>
        <div class="panel-body">
          <div class='contentWrapper ng-cloak'>
            <div class='content'>
              <ul class="thumbnails">
                <p>
                  content
                </p>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

这种方法的权衡:

• 您需要为侧边栏设置固定宽度(按 px、% 或任何值)
• 您需要有一个固定的高度或让侧边栏具有内容的高度(您不能放置height: 100%;)