我有以下布局,它是 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
会随着溢出的内容滚动吗?
最佳答案
您已将包装器的溢出设置为隐藏,只需将其设置为“自动”或“滚动”即可显示容器内的内容。只有这样它才会比你的内容容器长,然后它会占据整个宽度,因为那里没有其他元素。
事实上,我会建议您重新考虑使用 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>
关于html - 如何基于 AdminLTE 创建随侧边栏内容一起增长的多列布局?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46714485/