Css Flex konusunda yardım

medesan 1681 gün önce

1,151 defa görüntülendi

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.

alt değeri

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevap yaz

הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Cevaplar (3)

mustafaozk

1658 gün önce

https://www.youtube.com/watch?v=neavdpKEy28 bu videodaki adam flexbox kullanarak kutu ortalama yapıyor ben anladım istersen sende bi bak prototürkün de videoları vardır flexboxla ilgili onlarada bak derim

#001944

tayfunerbilen

1680 gün önce

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;
}

#001892

jct

1681 gün önce

Hocam bu işini görürmü; Örnek Tasarım

#001889