Question

我想在我的主页面布局中添加可滚动的左侧和右侧面板。

在右侧面板中，我想要可滚动的div，但整页不应该有滚动条。

我做了以下事情，

body{    
    height:100vh;
}

.body-container{
   backgound: yellow;
   display:flex;
   flex-wrap: wrap;
}

.left-panel{
   background:red;
   flex:1;
   margin-right:1px;
}

.right-panel{
   background:green;
   display:flex;
   flex-flow:column;
   flex:3 0 auto;  
}

.content-container{
   display:flex;
   flex-direction:column;
   flex:1;
}
.fixed-header{
   background:lightGreen;
}
.scrollable-content{
   flex:1;
   overflow-y:auto;
   background:lightBlue;
}

<div class="body-container">
    <div class="left-panel">
        <p> Left Panel </p>
    </div>
    <div class="right-panel">
        <p> Right Panel </p>
        <div class="content-container">
            <div class="fixed-header">
                <p> Fixed header </p>
                <p> Fixed header </p>
                <p> Fixed header </p>
                <p> Fixed header </p>
                <p> Fixed header </p>
                <p> Fixed header </p>
            </div>
            <div class="scrollable-content">
                <p> Scrollable </p>
                <p> Scrollable </p>
                <p> Scrollable </p>
                <p> Scrollable </p>
                <p> Scrollable </p>
                <p> Scrollable </p>
                <p> Scrollable </p>
                <p> Scrollable </p>
                <p> Scrollable </p>
                <p> Scrollable </p>
                <p> Scrollable </p>
                <p> Scrollable </p>
                <p> Scrollable </p>
            </div>
        </div>
    </div>
</div>

任何人都能帮助我吗？

Answer 1

试试这个，添加最大高度和溢出y来滚动。

body{    
    height:100vh;
    }

.body-container{
  backgound: yellow;
  display:flex;
  flex-wrap: wrap;
}

.left-panel{
  background:red;
  flex:1;
  margin-right:1px;
}

.right-panel{
  background:green;
  display:flex;
  flex-flow:column;
  flex:3 0 auto;  
}

.content-container{
  display:flex;
  flex-direction:column;
  flex:1;
}
.fixed-header{
   background:lightGreen;
}
.scrollable-content{
  flex:1;
  overflow-y:scroll;
  max-height:200px;
  background:lightBlue;
}

<div class="body-container">
<div class="left-panel">
<p>
Left Panel
</p>
</div>
<div class="right-panel">
<p>
Right Panel
</p>
<div class="content-container">
<div class="fixed-header">
<p>
Fixed header
</p>
<p>
Fixed header
</p>
<p>
Fixed header
</p>
<p>
Fixed header
</p>
<p>
Fixed header
</p>
<p>
Fixed header
</p>
</div>

<div class="scrollable-content">
<p>
Scrollable
</p>
<p>
Scrollable
</p>
<p>
Scrollable
</p>
<p>
Scrollable
</p>
<p>
Scrollable
</p>
<p>
Scrollable
</p>
<p>
Scrollable
</p>
<p>
Scrollable
</p>
<p>
Scrollable
</p>
<p>
Scrollable
</p>
<p>
Scrollable
</p>
<p>
Scrollable
</p>
</div>
</div>
</div>
</div>

Answer 2

以下是您要找的内容？：http://codepen.io/Skibbereen-Coderdojo/pen/BpbROm

我刚为您的.scrollable-content规则添加了一个高度

.scrollable-content{
  flex:1;
  overflow-y:auto;
  background:lightBlue;
  height: 100vh; /*Constrain the height */
}

添加固定的高度会限制您的.scrollable-content，然后您的overflow-y:auto;会启动并处理剩下的工作。

Answer 3

提及要滚动的div的高度。并启用scroll-y：auto。

为你添加了一个小提琴：

{{1}}

Answer 4

我已找到方法，我们不需要在子div上设置高度以使其可滚动。

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
}
.body-container {
  flex: 1: background: #fff;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
}
.left-panel {
  background: red;
  flex: 1
}
.right-panel {
  background: green;
  flex: 3;
  display: flex;
  flex-direction: column;
}
.content-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.fixed-header {} .scrollable-content {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
}

<div class="body-container">
  <div class="left-panel">
    <p>My Left Panel</p>
  </div>
  <div class="right-panel">
    <p>Test My Right Panel</p>
    <div class="content-container">
      <div class="fixed-header">
        <p>Fixed header</p>
        <p>Fixed header</p>
        <p>Fixed header</p>
      </div>

      <div class="scrollable-content">
        <p>Scrollable</p>
        <p>Scrollable</p>
        <p>Scrollable</p>
        <p>Scrollable</p>
        <p>Scrollable</p>
        <p>Scrollable</p>
        <p>Scrollable</p>
        <p>Scrollable</p>
        <p>Scrollable</p>
        <p>Scrollable</p>
        <p>Scrollable</p>
        <p>Scrollable</p>
      </div>
    </div>
  </div>
</div>

在flexbox Divs中添加可滚动的Div

4 个答案: