max-height İçinde max-height Kullanımı

redline 1500 gün önce

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

Merhaba PT'liler.

.container divimizin yüksekliği otomatik ama en yüksek hali ekranın %90'ı olmalı.

.container divimizin içinde bulunan .item divi'de otomatik yükseklikte fakat en fazla .container divimizin boyutu olmalı ve overflow-y: auto ile scroll edebilelim.

Aşağıdaki örnek kodda .item divimizin max-height değerini px olarak girdiğimizde sonuca ulaşıyoruz fakat % olarak girdiğimizde sonuç alamıyorum.

HTML Kodları

<div class="container">
    <div class="item">
        İÇERİK
    </div>
</div>

CSS Kodları

.container {
    max-height: 90%;
}

.item {
    max-height: 500px;
    overflow-y: auto;
}

Soru hatalı mı? 👎

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

Spam olarak işaretle

Cevaplar (4)

redline

1499 gün önce

@mutluol Hocam yine yanlış anladınız. :) Sabit 90% yükseklikte değil .container divi en auto yükseklikte, en fazla 90% olması gerekiyor. :) Bu sebepten .item divine absolute veremeyiz çünkü .item divinin yüksekliği .container divinin yüksekliğini belirliyor.

.item divinin yüksekliği ekranı aşınca scroll olsun istiyorum.

#000896

mutluol

1499 gün önce

keşke baştan bu kadar ayrıntılı yazaydın max ve mini boyutunu en yüksek veya düşük olmasını istediğin boyut olarak kullanmalısın ana boyutu tanımlamak için değil
.container {
position:relative;
height: 90%;
width: 90%;
background-color: darkblue;
}

.item {
position:absolute;
height: 100%;
width: 100%;
max-width: 50%;
overflow-y: auto;
background-color: red;
}

#000895

redline

1499 gün önce

@mutluol Hocam min-height ile de denedim fakat olmadı. 500px'i örnek olarak verdim yani onunla bir işimiz yok. .container divi en fazla 90% ile ekranı kaplayacak yükseklikte. Ama normalde 40% vb. oranlarda oluyor, bazı durumlarda yükseliyor. İçinde bulunan .item divinin içeriği uzayınca .container divi en fazla %90 olmalı. Bu durumda .item divi .container divinden taşıyor. Bende taşmasın diye .item divine de max-height vermeye çalışıyorum ve overflow ile scroll etmek istiyorum. min-height: 100% çalışsaydı oda işimizi görecekti aslında. Ama .container divinin yüksekliği değişken olduğu için midir bilmiyorum, height: 100%'de denedim, min-height, max-height hiç bibi % ile çalışmıyor.

#000889

mutluol

1500 gün önce

ikincide tekrar max-heşght kullanırsan, zaten önceden max yükseliği belirttiğin için container %90 olsa bile item clasının tanımı maksimum 500px olur % ile sayfayı doldurmamasının sebebi ise içerisindeki içeriğin boyutundan kaynaklanıyor eğer içerisinde ekranın 3 katı bir içerik olsa maks olarak tanımladığın % değerlerine erişip kısıtlardı örneğin %90 ise 3 katı değil %90ı kadar olurdu yani bu durumda sadece içerik max-heighti geçiyorsa max-height görüntü uygulardı bu yüzde min kullanmalısın
<style>
.container {

max-height: 90%;
background-color:

}

.item {

min-height: 100%;
overflow-y: auto;
background-color: red;

}
</style>
<div class="container">

<div class="item">
    
</div>

</div>

#000883