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>

我通常会使用引导网格模板执行此操作，但是我使用角度拖放库并使用它（出于某种原因）在移动物体时弄乱动画。

最简单的方法是添加另一个div作为旁边菜单，总是在显示的两个div的左边？

Answer 1

您可以这样做：

＆＃13;

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

＆＃13;

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

＆＃13;

这种方法的权衡：

您需要在边栏上设置固定宽度（通过px，％或任何其他内容）
您需要具有固定的高度或让侧边栏具有内容的高度（您不能放置height: 100%;）

Answer 2

您可以向左侧浮动一个侧边栏，但要让它填满页面的全高所有，其祖先元素必须为height: 100%。如果.sidebar直接位于body下，则这些样式会执行此操作：

html, body, .sidebar { height: 100% }
.sidebar { float: left }

Sample，带有浅色背景以显示块轮廓。

Answer 3

我不确定我完全理解这个问题，所以我会尝试回答。我会创建一个带浮动左css的div，在你的左侧菜单中有一个导航，如果必须在整个页面上。另一个div要么浮动要么没有，要么保留你创建的2个div。

Answer 4

您可以使用flexbox（调整您的需求）

<强> CSS

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
}

.flex-item {
    -webkit-flex: 1 auto;
    flex: 1 auto;
}

<强> DEMO HERE

Answer 5

将所有内容全部包装在容器中

display: table;
width: 100%;
table-layout: fixed;

然后用

创建一个侧边栏div

display:table-cell;
vertical-align:top;
width:35%;

并使用

将您的内容包装在容器中

display:table-cell;
vertical-align:top;
width:100%;

确保你的身边裸露在你的内容之上，因为它在左边。

这就是带有侧边栏的灵活网格。

Answer 6

您可以分别使用col-md-3和col-md-9作为侧边栏和内容。使用position: fixed

修复补充工具栏

BootPly Demo

Sample Image here

CSS创建侧边菜单

6 个答案: