v2.5.2
Giriş yap

Header ve Sidebar'ı sabit tutmak (Flexbox)

canertsz
385 defa görüntülendi ve 1 kişi tarafından değerlendirildi
1 2

Merhabalar, prototurk sitesinin bir klonunu yapmak istedim fakat yaparken header ve sidebar'ı sabit yapmak için hiçbir şey yapmadım.

şu anki hali aşağıdaki gibi

basit haliyle header'ım ve sonrasında sidebar ve content alanımı kapsayan ana bir div var.

yapmam gereken nedir?

css
Cevap yaz
Cevaplar (2)
ebykdrms
698 gün önce
<html>
    <head>
        <title>Hey</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <header>Header</header>
        <main>
            <aside>Menü</aside>
            <section>içerik</section>
        </main>
    </body>
</html>

* { margin:0; padding:0; box-sizing:0 }
html,body { height:100%; }
body { display:flex; flex-direction:column; }
body > header { display:flex; flex-direction:row; width:100%; height:60px; }
body > main { display:flex; flex-direction:row; flex:1; }
body > main > aside { width:250px; height:100%; }
body > main > section { flex:1; height:100%; overflow-y:scroll; }
0
#010312