Css Flex konusunda yardım
Merhaba arkadaşlar, bir haftadan beri yapmadığım şey kalmadı ama istediğim ve altta resmi olan görselliği elde edemedim bu konuda yardımlarınızı rica ediyorum.
şöyle ki; html, body {width: 100%; height: 100%;} değerlerim bu şekilde. Css flex özelliğini kullanarak aşağıdaki görseli elde etmeye şalışıyorum. aslında kısmen de yapıyorum ama istediğimi tam olarak yapamıyorum.
Kapsayıcı div'imin yüksekliği 100% olması, içerisinde de 2 div olması gerekiyor.
responsive diye adlandırdığım div pencere yüksekliğine göre hareket etmesi alttaki 140px yüksekliğinde olan div'in ise responsive divi'inin altına yapışması gerekiyor.
kapsayıcına display: flex vereceksin ve flex yönünü flex-direction: column şeklinde değiştireceksin. Footer'a height ve min-height vereceksin, content alanına flex: 1 ve overflow: auto dediğinde tam olarak istediğin oluyor :) resimden bağımsız olarak şu örneğe bakabilirsin;
<div class="container">
<div class="content">
içerik <br>
içerik <br>
içerik <br>
içerik <br>
içerik <br>
içerik <br>
içerik <br>
içerik <br>
içerik <br>
içerik <br>
içerik <br>
içerik <br>
içerik <br>
içerik <br>
içerik <br>
</div>
<div class="footer">
sabit footer
</div>
</div>
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.container {
height: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
}
.container .content {
flex: 1;
overflow: auto;
}
.container .footer {
height: 140px;
min-height: 140px;
background: #ddd;
}