html - 如何基于 AdminLTE 创建随侧边栏内容一起增长的多列布局？

Question

我有以下布局，它是 AdminLTE boxed layout template 的一个改动:

HTML

<div class="wrapper">
  <div class="header">
    Header
  </div>
  <div class="leftbar">
    Left bar
  </div>
  <div class="content-wrapper">
    <div class="content">
      Content
    </div>
    <div class="content-rightbar">
      Right bar
    </div>
  </div>
  <div class="footer">
    Footer
  </div>
</div>

CSS

body {
  background-color: lightgray;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.wrapper {
  overflow: hidden;
  background-color: #222d32;
  max-width: 600px;
  margin: 0 auto;
  min-height: 100%;
  position: relative;
  height: 100%;
}

.header {
  position: relative;
  height: 30px;
  z-index: 1030;
  color: white;
  background-color: #367fa9;
  padding: 2px;
}

.leftbar {
  color: white;
  background-color: #222d32;
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 30px;
  min-height: 100%;
  width: 100px;
  z-index: 810;
  padding: 40px 10px 10px 10px;
}

.content-wrapper {
  margin-right: 100px;
  margin-left: 100px;
  background-color: #ecf0f5;
  z-index: 800;
}

.content {
  min-height: 200px;
  padding: 10px;
  margin-right: auto;
  margin-left: auto;
}

.content-rightbar {
  right: 0;
  min-height: calc(100% - 30px);
  position: absolute;
  background: #f9fafc;
  border-left: 1px solid #d2d6de;
  z-index: 1010;
  top: 0;
  width: 100px;
  text-align: right;
  padding: 40px 10px 0 10px;
}

.footer {
  background: #fff;
  border-top: 1px solid #d2d6de;
  margin-left: 100px;
  z-index: 9999;
  height: 30px;
  padding: 2px;
}

密码本

https://codepen.io/kspearrin/pen/QqBrpB

结果

问题

这看起来正是我希望解决一个问题的方式:

• 用内容溢出 leftbar 和 content-rightbar 会导致 overflow hidden 的内容。高度仅由 content 中的内容决定。

例子:

问题

我怎样才能使 body 中整个布局的高度随着 content、leftbar 的内容而增加，和 content-rightbar - 或者 - leftbar 和 content-rightbar 会随着溢出的内容滚动吗？

Answer 1

您已将包装器的溢出设置为隐藏，只需将其设置为“自动”或“滚动”即可显示容器内的内容。只有这样它才会比你的内容容器长，然后它会占据整个宽度，因为那里没有其他元素。

事实上，我会建议您重新考虑使用 flex box，因为它会让您的元素保持相同的高度，并会防止您现在遇到的所有溢出问题。

如果你不熟悉 flex 盒子，我可以推荐你https://css-tricks.com/snippets/css/a-guide-to-flexbox/最后，您将找到一个多列布局示例，其中包含元素所需的所有元素。

还有另一个提示:您可以为侧边栏元素使用无序列表，因为这是最常用的方法。

ul {list-style: none;}

<ul>
    <li>Left bar</li>
    <li>Left bar</li>
    <li>Left bar</li>
</ul>