html - 带有侧面板的 Flexbox 全高和全宽

标签 html css flexbox

我开始阅读 Flexbox and vertical scroll in a full-height app using NEWER flexbox api .以下的效果很好:

html,body{
    overflow: hidden;
    width: 100%; height: 100%;
    max-height: 100%; max-width: 100%;
    margin: 0; padding: 0;
}

.site-container {
  height: 100%; width: 100%;
  display: flex;
  flex-direction: column;
}

.site-container .site-header,
.site-container .site-footer{
  flex: 0 0 auto;
  overflow: visible;
}

.site-container .site-body {
  position: relative;
  overflow: auto;
  min-height: 0px;
  flex: 0 1 auto;
  }
<div class="site-container">
  <div class="site-header">
    <div style="height: 40px;background-color:YellowGreen">My Header Test </div>
  </div>
  <div class="site-body">
          blah1<br />
          blah2<br />
          blah3<br />
          blah4<br />
          blah5<br />
          blah6<br />
          blah7<br />
          blah8<br />
          blah9<br />
          blah10<br />
          blah11<br />
          blah12<br />
          blah13<br />
          blah14<br />
          blah15<br />
          blah16<br />
          blah17<br />
          blah18<br />
          blah19<br />
          blah20<br />
          blah21<br />
          blah22<br />
          blah23<br />
          blah24<br />
          blah25<br />
          blah26<br />
          blah27<br />
          blah28<br />
          blah29<br />
          blah30<br />
          blah31<br />
          blah32<br />
          blah33<br />
          blah34<br />
          blah35<br />
          blah36<br />
          blah37<br />
          blah38<br />
          blah39<br />
          blah40<br />
          blah41<br />
          blah42<br />
          blah43<br />
          blah44<br />
          blah45<br />
          blah46<br />
          blah47<br />
          blah48<br />
          blah49<br />
          blah50<br />
          blah51<br />
          blah52<br />
          blah53<br />
          blah54<br />
          blah55<br />
          blah56<br />
          blah57<br />
          blah58<br />
          blah59<br />
          blah60<br />
          blah61<br />
          blah62<br />
          blah63<br />
          blah64<br />
          blah65<br />
          blah66<br />
          blah67<br />
          blah68<br />
          blah69<br />
  </div>
  <div class="site-footer">
    <div style="height: 40px;background-color:YellowGreen">My Footer Test </div>
  </div>
</div>

在上面的代码片段中，主体滚动得很好。

现在我正在尝试将 Body flex 成 Row 并创建非滚动侧边栏，但保持中心内容滚动。我有以下内容，但内容没有滚动。我错过了什么？

html,body{
    overflow: hidden;
    width: 100%; height: 100%;
    max-height: 100%; max-width: 100%;
    margin: 0; padding: 0;
}

.site-container {
  height: 100%; width: 100%;
  display: flex;
  flex-direction: column;
}

.site-container .site-header,
.site-container .site-footer{
  flex: 0 0 auto;
  overflow: visible;
}

.site-container .site-body {
  position: relative;
  min-height: 0px;
  flex: 0 1 auto;
}

.body-container{
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: row;
}

.body-container .body-left,
.body-container .body-right{
  flex: 0 0 auto;
  overflow: visible;
}

.body-container .site-content{
  position: relative;
  overflow: auto;
  min-width: 0px;
  flex: 1 0 auto;
}
<div class="site-container">
  <div class="site-header">
    <div style="height: 40px;background-color:YellowGreen">My Header Test </div>
  </div>
  <div class="site-body">
    <div class="body-container">
      <div class="site-sidebar-left">
        <div style="background-color:lightgray;">
          left1<br />
          left2<br />
          left3<br />
          left4<br />
          left5<br />
          left6<br />
          left7<br />
          left8<br />
          left9<br />
          left10<br />
        </div>
      </div>
      <div class="site-content">
        blah1<br />
        blah2<br />
        blah3<br />
        blah4<br />
        blah5<br />
        blah6<br />
        blah7<br />
        blah8<br />
        blah9<br />
        blah10<br />
        blah11<br />
        blah12<br />
        blah13<br />
        blah14<br />
        blah15<br />
        blah16<br />
        blah17<br />
        blah18<br />
        blah19<br />
        blah20<br />
        blah21<br />
        blah22<br />
        blah23<br />
        blah24<br />
        blah25<br />
        blah26<br />
        blah27<br />
        blah28<br />
        blah29<br />
        blah30<br />
        blah31<br />
        blah32<br />
        blah33<br />
        blah34<br />
        blah35<br />
        blah36<br />
        blah37<br />
        blah38<br />
        blah39<br />
        blah40<br />
        blah41<br />
        blah42<br />
        blah43<br />
        blah44<br />
        blah45<br />
        blah46<br />
        blah47<br />
        blah48<br />
        blah49<br />
        blah50<br />
        blah51<br />
        blah52<br />
        blah53<br />
        blah54<br />
        blah55<br />
        blah56<br />
        blah57<br />
        blah58<br />
        blah59<br />
        blah60<br />
        blah61<br />
        blah62<br />
        blah63<br />
        blah64<br />
        blah65<br />
        blah66<br />
        blah67<br />
        blah68<br />
        blah69<br />
      </div>
      <div class="site-sidebar-right">
        <div style="background-color:lightgray;">
          right1<br />
          right2<br />
          right3<br />
          right4<br />
          right5<br />
          right6<br />
          right7<br />
          right8<br />
          right9<br />
          right10<br />
        </div>
      </div>
    </div>
  </div>
  <div class="site-footer">
    <div style="height: 40px;background-color:YellowGreen">My Footer Test </div>
  </div>
</div>

最终它看起来像:

enter image description here

最佳答案

不同于 site-header , 这是 site-container 的 flex 元素, site-footer嵌套在 site-body 中.要么是故意的，要么你错过了结束语 div .出于这个答案的目的，我假设是后者。

现在 site-header , site-body和 site-footer是 sibling 。

然后我添加了overflow: auto和 flex: 1至 .site-content .第一个启用滚动条，第二个消耗行上的可用空间。

.site-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.site-body {
  min-height: 0px;
  height: 100%;
}

.body-container {
  display: flex;
  height: 100%;
}

.site-content {
  flex: 1;
  overflow: auto;
}

body {
  margin: 0;
}
<div class="site-container">
  <div class="site-header">
    <div style="height: 40px;background-color:YellowGreen">My Header Test </div>
  </div>
  <div class="site-body">
    <div class="body-container">
      <div class="site-sidebar-left">
        <div style="background-color:lightgray;">
          left1
          <br /> left2
          <br /> left3
          <br /> left4
          <br /> left5
          <br /> left6
          <br /> left7
          <br /> left8
          <br /> left9
          <br /> left10
          <br />
        </div>
      </div>
      <div class="site-content">
        blah1
        <br /> blah2
        <br /> blah3
        <br /> blah4
        <br /> blah5
        <br /> blah6
        <br /> blah7
        <br /> blah8
        <br /> blah9
        <br /> blah10
        <br /> blah11
        <br /> blah12
        <br /> blah13
        <br /> blah14
        <br /> blah15
        <br /> blah16
        <br /> blah17
        <br /> blah18
        <br /> blah19
        <br /> blah20
        <br /> blah21
        <br /> blah22
        <br /> blah23
        <br /> blah24
        <br /> blah25
        <br /> blah26
        <br /> blah27
        <br /> blah28
        <br /> blah29
        <br /> blah30
        <br /> blah31
        <br /> blah32
        <br /> blah33
        <br /> blah34
        <br /> blah35
        <br /> blah36
        <br /> blah37
        <br /> blah38
        <br /> blah39
        <br /> blah40
        <br /> blah41
        <br /> blah42
        <br /> blah43
        <br /> blah44
        <br /> blah45
        <br /> blah46
        <br /> blah47
        <br /> blah48
        <br /> blah49
        <br /> blah50
        <br /> blah51
        <br /> blah52
        <br /> blah53
        <br /> blah54
        <br /> blah55
        <br /> blah56
        <br /> blah57
        <br /> blah58
        <br /> blah59
        <br /> blah60
        <br /> blah61
        <br /> blah62
        <br /> blah63
        <br /> blah64
        <br /> blah65
        <br /> blah66
        <br /> blah67
        <br /> blah68
        <br /> blah69
        <br />
      </div>
      <div class="site-sidebar-right">
        <div style="background-color:lightgray;">
          right1
          <br /> right2
          <br /> right3
          <br /> right4
          <br /> right5
          <br /> right6
          <br /> right7
          <br /> right8
          <br /> right9
          <br /> right10
          <br />
        </div>
      </div>
    </div>
  </div>
  <div class="site-footer">
    <div style="height: 40px;background-color:YellowGreen">My Footer Test </div>
  </div>
</div>

https://jsfiddle.net/9mqxytv4/2/

关于html - 带有侧面板的 Flexbox 全高和全宽，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47403295/

上一篇：jquery - 为 Laravel Collective Form 创建手动提交按钮

下一篇：html - 具有属性位置(相对、绝对)或 float 的 Shape-outside

相关文章：

javascript - Flexbox 在 anchor 内生长

javascript - Bootstrap-datetimepicker 选择过去几个月

html - 如何在图像图标上设置鼠标效果

html - 仅在 Firefox 中应用 CSS 规则

javascript - jQuery 选择器 - 选择特定标签内的文本

html - CSS 背景源在 IE8 + Vista 中获取 'flashy'

html - 具有固定 div 的两列 Flexbox 布局

css - 灵活的盒子布局模型: How should auto margins in the cross-axis direction behave?

c# - 将 unicode 添加到字符串 html 标记模式

html - 使用 CSS::before 在列表链接前添加一个小图标

©2024 IT工具网  联系我们