平均分配一个固定大小的容器的空间。 flexbox的情况? [英] split space of a fixed size container equally. a case for flexbox?
问题描述
它的HTML部分是微不足道的:A div
$ div
的孩子。
我试图用flexbox来解决这个问题。可能有更好的选择:
css部分:
#container {
position:absolute;
宽度:100%;身高:100%
display:flex;
flex-direction:column;
}
#item1 {flex:0 0 auto; }
#item2 {flex:1 1 auto; }
#item3 {flex:1 1 auto; }
不幸的是,这只有在项目2或3的内容不太大时才有效。
请参阅这个小提琴以获得更详细的实施问题。
$ b
body {margin:0; overflow:hidden;} * {box-sizing:border-box;}#container {position:absolute;宽度:100%;身高:100%边框:2px纯绿色;显示:flex; flex-direction:column;}#item1 {flex:0 0 auto; background-color:Bisque;}#item2 {flex:1 1 auto; background-color:DarkOrange;}#item3 {flex:1 1 auto;背景颜色:暗草绿;}
<预类= 片段码-HTML语言HTML的prettyprint-越权> < DIV ID = 容器 > < div id =item1>我会像我的内容一样高。< / div> < div id =item2>从其他方面来看,我会精确到50%。无论我的内容有多短或长。如果需要,应该有滚动条。< / div> < div id =item3>其余的其他50%! <峰; br>正确? <峰; br>正确? <峰; br>正确? <峰; br>正确? <峰; br>正确? <峰; br>正确? <峰; br>正确? <峰; br>正确? <峰; br>正确? <峰; br>正确? <峰; br>正确? <峰; br>正确? <峰; br>正确? <峰; br>正确? <峰; br>正确? <峰; br>正确? <峰; br>正确? <峰; br>正确? <峰; br>正确? <峰; br>正确? <峰; br>正确? <峰; br>正确? <峰; br>正确? < / DIV>< / DIV>
flex:1
。 我也添加了 overflow-y:auto;
规则来滚动。
$ b 实施例
#ITEM1 {背景 - 颜色:浓汤; }
#item2 {flex:1;背景颜色:DarkOrange; overflow-y:auto;}
#item3 {flex:1;背景颜色:MediumAquaMarine; overflow-y:auto;}
How can a HTML/CSS structure be designed, that splits a fixed size container horizontally into three parts. The first part should be as tall as it's content needs. The second and the third part would share the remaining space fifty-fifty - regardless of their contents. If the size of their contents exceeds this limitation, the section should be scrollable.
The HTML part of it is trivial: A div
container with three div
's as children.
I tried to solve this with flexbox - however there might be a better choice for this:
The css part:
#container {
position: absolute;
width: 100%; height: 100%;
display: flex;
flex-direction: column;
}
#item1 { flex: 0 0 auto; }
#item2 { flex: 1 1 auto; }
#item3 { flex: 1 1 auto; }
Unfortunately this only works if the contents of item 2 or 3 is not too large.
See this fiddle for a bit more detailed implementation of the problem.
body {
margin: 0;
overflow: hidden;
}
* {
box-sizing: border-box;
}
#container {
position: absolute;
width: 100%;
height: 100%;
border: 2px solid green;
display: flex;
flex-direction: column;
}
#item1 {
flex: 0 0 auto;
background-color: Bisque;
}
#item2 {
flex: 1 1 auto;
background-color: DarkOrange;
}
#item3 {
flex: 1 1 auto;
background-color: MediumAquaMarine;
}
<div id="container">
<div id="item1">I'll be as tall as my content takes.</div>
<div id="item2">From the rest, I'll take exactly 50%. No matter how short or long my content is. If needed there should be scrollbars.</div>
<div id="item3">I'll take the other 50% of the rest!
<br>right?
<br>right?
<br>right?
<br>right?
<br>right?
<br>right?
<br>right?
<br>right?
<br>right?
<br>right?
<br>right?
<br>right?
<br>right?
<br>right?
<br>right?
<br>right?
<br>right?
<br>right?
<br>right?
<br>right?
<br>right?
<br>right?
<br>right?
</div>
</div>
Yes, you can use flex. Here's a little improvement for your code. Item1 doesn't need to have a flex rule and item2 and item3 will have flex: 1
.
I also added the overflow-y: auto;
rule to make it scrollable.
#item1 {background-color: Bisque ; }
#item2 { flex: 1; background-color: DarkOrange ; overflow-y: auto;}
#item3 { flex: 1; background-color: MediumAquaMarine ; overflow-y: auto;}
这篇关于平均分配一个固定大小的容器的空间。 flexbox的情况?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!