如何基于 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;
}

Codepen

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

结果

问题

这看起来正是我想要的，但有一个问题：

用内容溢出 leftbar 和 content-rightbar 会导致隐藏溢出的内容。高度只由content.

示例：

问题

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

Answer 1

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

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

如果您不熟悉弹性框，我可以向您推荐 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>

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

How do I create a multi-column layout based off of AdminLTE that grows with sidebar content?

html

css

adminlte

HTML

CSS

Codepen

结果

问题

问题