Question

我的标题栏（#A）贴在页面底部，页脚栏（#C）贴在页面底部。每个都有30px的固定高度，这里用黄色表示。他们通过以下代码贴在那里：display:flex; align-content: space-between;。

在这两个div之间有一个带有页面内容（#B）的红色div，它大于屏幕大小。我的目标是让这个红色div只占用剩余的屏幕空间，保持这个高度并滚动其内容。但是当我设置overflow:scroll时，滚动条显示无效。

我知道有另外一种可能性来执行此布局，例如包含3行的表格，或者使用position:absolute / position:fixed放置条形图并摆脱display:flex;但在跳出这些替代方案之前，我想知道当前情况是否可行。

body {
  margin:0px;
}
  
#container {
    max-width: 100vw;
    max-height: 100vh;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: space-between;
    align-content: space-between;
}

#A {
width: 100%;
height: 30px;
}
  
#B {
display:inline-block;
width: 100%;
overflow: scroll;
}
  
#C {
width: 100%;
height: 30px;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div id="container">
  <div id=A style="background-color:gold;"></div>
  <div id=B style="background-color:tomato;">
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
</div>
<div id=C style="background-color:gold;"></div>
</div>

</body>
</html>

Answer 1

也许你正在努力实现这样的目标：

html   { height: 100%; min-height: 100%; }
body   { height: 100%; min-height: 100%; margin: 0; }

#container { 
    display: flex;
    flex-direction: column;
    height: 100%;
}

#A { flex: 0 0 30px; }

#B { flex: 1 1 auto; overflow: auto; }

#C { flex: 0 0 30px; }

http://codepen.io/simoncereska/pen/xZQPXQ

Answer 2

我认为这就是你想要的？如果是这样，您有一个列流（向上和向下），因此您应使用flex-direction: column而不是row（默认值）。

body {
  margin: 0px;
  padding: 0;
}
#container {
  max-width: 100vw;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: space-between;
}
#A {
  width: 100%;
  min-height: 30px;
}
#B {
  width: 100%;
  height: calc(100% - 60px);
  overflow-x: scroll;
  overflow-y: hiden;
  margin: auto;
}
#C {
  width: 100%;
  min-height: 30px;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <div id="container">
    <div id=A style="background-color:gold;"></div>
    <div id=B style="background-color:tomato;">
      text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>text
      <br>
    </div>
    <div id=C style="background-color:gold;"></div>
  </div>

</body>

</html>

是否可以在另外两个flex div之间滚动div内容？

2 个答案: