お世話になっております。
現在CSS Flexboxを利用してレイアウトを構成しているのですが、Flex ContainerにFlex Itemを配置し、
Header, Content, Footerの子要素を配置し、Content内に孫要素を配置しています。
html
1<div class="main-container"> 2 <div class="header"> 3 Header 4 </div> 5 <div class="content"> 6 <div class="parent"> 7 <div class="child"> 8 CHILD 9 </div> 10 </div> 11 </div> 12 <div class="footer"> 13 Footer 14 </div> 15</div>
css
1.main-container { 2 background-color: black; 3 height: 100%; 4 display:flex; 5 display: -webkit-flex; 6 flex-direction: column; 7 -webkit-flex-direction: column; 8 -webkit-align-content: stretch; 9 align-content: stretch; 10} 11.header { 12 min-height: 50px; 13 background-color: red; 14} 15.content { 16 -webkit-flex: 1; 17 flex: 1; 18 background-color: blue; 19 display: flex; 20 display: -webkit-flex; 21 flex-direction: column; 22 -webkit-flex-direction: column; 23} 24.footer { 25 min-height: 100px; 26 background-color: green; 27} 28.parent { 29 -webkit-flex: 1; 30 flex: 1; 31 background-color: yellow; 32 display: flex; 33 display: -webkit-flex; 34 flex-direction: column; 35 -webkit-flex-direction: column; 36 justify-content: center; 37} 38.child { 39 min-height: 200px; 40 background-color: pink; 41}
完成イメージはこのようなイメージです。
しかし、このようにレイアウトはできるのですが、ブラウザサイズを縮めると
のようにHeaderを押しつぶしてしまうようです。
ここまで縮められることはないと言って割り切ることはできるのですが、この挙動がどうしても納得いかず、
どうしてこうなるのか知りたくて投稿致しました。
宜しくお願い致します。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/06/08 23:34