Is it possible to scroll a div content between another 2 flex divs?

前端未结

关注

 2  1207

I have a header bar(#A) sticked on top and a footer bar(#C) sticked on the bottom of the page. Each one have a fixed height of 30px and are represented here by the

相关标签:

2条回答

无人及你

2021-01-24 06:51

Maybe you are trying to achieve something like this:

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

0 讨论(0)

囚心锁ツ

2021-01-24 06:54

I think this is what you wanted? If so, you have a column flow (up and down) so flex-direction: column you should use instead of row (that's default).

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>

0 讨论(0)