yükseklik: 100% vs yükseklik: otomatik arasındaki fark

168

Bir röportajda "css height:100%ve arasındaki fark height:autonedir?"

Birisi açıklayabilir mi?

css

— Gowsikan
kaynak

237

height: 100% elemente ana kabının% 100 yüksekliğini verir.

height: auto eleman yüksekliğinin çocuklarının yüksekliğine bağlı olacağı anlamına gelir.

Şu örnekleri düşünün:

yükseklik: 100%

<div style="height: 50px">
    <div id="innerDiv" style="height: 100%">
    </div>
</div>

#innerDiv sahip olacak height: 50px

yükseklik: otomatik

<div style="height: 50px">
    <div id="innerDiv" style="height: auto">
          <div id="evenInner" style="height: 10px">
          </div>
    </div>
</div>

#innerDiv sahip olacak height: 10px

— Manish Mishra
kaynak

6

Ben 'yükseklik: auto #innerDiv olacak 10px + the size it needs for its own content- bu jsfiddle

— BornToCode

@Manish Mishra: En iyi yanıt veren tasarım nedir? Alt öğenin veya kap öğesinin yüksekliğini ayarlamak ve diğerinin yüksekliğini elde etmesine izin vermek?

— John Strood

@Djack, hepsi çeşitli ekranlarda tasarımınızdan beklediğiniz görünüm, his ve davranışa bağlıdır ve buna göre css'inizi yazabilirsiniz. Diye bir genel küresel kural yoktur setting the height of the child element or the container element. Belirli tutarlılığı izlemeniz, çoğaltmadan kaçınmanız, yeniden çalışmayı azaltmanız, ortak düzenleri gruplandırmanız koşuluyla, tasarımınıza ulaşmak için ne gerekiyorsa yapabilirsiniz. Kısacası, çalışmanız için bir sistem / desen olmalı, böylece okunması ve değiştirilmesi kolay ve elbette işe yaraması gerçeği

— Manish Mishra

2

Bence otomobili düşünmenin iyi bir yolu, 'ayarını kaldırmış' bir yükseklik olmanızdır.

— niico

1

BornToCode'un yukarıda paylaştığı kemanı auto, elementin hem içeriğini hem de çocuğunun içeriğini barındırmasına neden olan daha açık hale getirmek için değiştirdim. Buna karşılık Sabit yükseklik değeri, belirtilen yüksekliğe sığamayan içeriği büyütmez (veya göstermez). jsfiddle.net/m3f8y6xr/1 Bu Cevap, sanırım, kendi metni ya da bir çocuğun içeriği olsun, öğenin tüm içeriği içerecek şekilde büyümesini sağlamak için yeterince ifade edilmediğine inanıyorum. Elbette kendi metninin de bir çocuk olduğu söylenebilir. Bu, davranışın görsel olarak onaylanmasını sağlar.

— SherylHohman

5

% 100'lük bir yükseklik , muhtemelen tarayıcınızın iç penceresinin yüksekliğidir , çünkü bu, üst öğesinin , sayfanın yüksekliğidir . Bir autoyükseklik olacak minimum yükseklik arasında içermesi gerekli .

— Rohit Azad
kaynak

3

Üst öğe, tarayıcı penceresinin boyutuna uymayan tanımlı bir yüksekliğe sahipse bu mutlaka doğru değildir

— goonerify

1

Varsayılan height: autotarayıcıdır, ancak height: X%yüksekliği içeren bloğun yüzdesi olarak tanımlar.

— Vahid Haydarinezhad
kaynak

0

height:% 100, üst kap belirli bir height özelliğine sahipse çalışır, çalışmaz

— Chukwuemeka
kaynak