Q&A
一番上にheader、その下に画面いっぱいにtop、その下に普通のコンテンツ用のboxを縦並びにしたいと思っています。
ですが、実際はtopの中にboxが入り込んでしまいます。
topが可変であることが原因かなと思いつつ対処の仕方がわかりません。
どうかお願いします。
</div><section class="box"> box1 </section> <section class="box"> box2 </section> <section class="box"> box3 </section>
css
#wrapper{
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
overflow: hidden;
}
#header{
width: 100%;
height: 60px;
}
#top{
height: calc(100vh - 60px);
display:flex;
align-items: center;
justify-content: center;
min-width:100%;
}
回答1件
0
掲載されているコードに漏れが無いとすると、
「一番上にheader」
↑これに該当するタグが無いのが原因だと思います。
例えば、#wrapperの上に<div id="header"></div>などを追加してみたらどうでしょうか?
html
1<body> 2 <div id="header"></div> 3 <div id="wrapper"> 4 <section id="top"> 5 <div id="top-content"></div> 6 </section> 7...
投稿2021/03/07 16:06
総合スコア1323
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。