お世話になってます。
CSSとHTMLの学習を1からしようと思い、現在はflexboxについて学習しています。
そして、今実現したいのがfloatを使わずに、レスポンシブに以下のような図を作りたいです。
■ デスクトップ
■ スマホ
下記のようにデスクトップの方はできていますが、このコードだと
スマホの幅にした時に、サイドがフッターの下にきてしまいます。
htmlで、footerを一番下にしてあげたいのですが、
そうなるとsideの高さがfooterの横まで伸びません。
html
<div id="wrapper"> <div id="left"> <div id="main1">main1</div> <div id="main2">main2</div> <div id="footer">footer</div> </div> <div id="right"> <div id="side"></div> </div> </div>
css
#wrapper { width: 1000px; margin: 0 auto; display: flex; border: 2px solid black; } #left { width: 75%; } #right { width: 25%; } #main1, #main2, #footer, #side { margin: 20px 10px; border: 2px solid black; text-align: center; } #main1, #footer { height: 50px; } #main2 { height: 100px; } #side { height: calc(100% - 44px); } @media screen and (max-width: 599px) { /* ここで、sideをフッターの上に入れ、 結果、フッターを一番下にしたい */ }
どのようにしたら良いでしょうか。
floatではできるのですが、今回は極力使いたくないです。
お力を貸していただけますと嬉しいです。



まだ回答がついていません
会員登録して回答してみよう