是否可以在另外2个flex div之间滚动div内容？ [英] Is it possible to scroll a div content between another 2 flex divs?
问题描述
我有一个标题栏（#A）贴在页面的顶部，一个页脚栏（#C）贴在页面的底部。每个都有固定的高度 30px ，并在这里用黄色表示。他们坚持在那里由以下代码： display：flex;
在这两个div之间有一个红色div与页面内容（#B）， wich大于屏幕尺寸。我的目标是让这个红色div只占剩余的屏幕空间，保持这个高度和滚动其内容。但是当我设置 overflow：scroll 时，滚动条显示没有效果。
执行此布局像一个有3行的表，或放置 position：absolute / position：fixed 删除 display：flex ;但是在跳出这些选项之前，我想知道当前的情况是否可能。
body {margin：0px;} #container { max-width：100vw; max-height：100vh;显示：-webkit-flex;显示：flex; -webkit-flex-wrap：wrap; flex-wrap：wrap; -webkit-align-content：空格; 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&
文本< br>文本< br>文本< br>文本< br>文本< br>文本< br& br>文字< br>文字&br>文字&br>文字&br>文字&br>文字< br>文字&br>文字< br> text< br>文字&br&
文本< br>文本< br>文本< br>文本< br>文本< br>文本< br& br> text< br> text< br> text< br> text< br> text< br> text< br> text< br> text< br>< / div>< div id = C style = color：gold;>< / div>< / div>< / body>< / html>
解决方案也许你正试图达到这样的效果：
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
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
30pxand are represented here by the yellow color. They're sticked on there by the following code:display:flex; align-content: space-between;.Between of these 2 divs there is a red div with the page content(#B), wich is bigger than the screen size. My objective is to let this red div takes only the remaining screen space, keep this height and scroll its content. But when I set
overflow:scrollthe scrollbar shows up with no effect.I know there is another possibilities to perform this layout like a table with 3 rows, or placing the bars with
position:absolute/position:fixedand get rid of thedisplay:flex; but before of jumping out to these alternatives I want to know if the current scenario is possible.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>
解决方案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
这篇关于是否可以在另外2个flex div之间滚动div内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
