perbedaan antara tinggi css: 100% vs tinggi: otomatis

167

Saya ditanya sebuah pertanyaan dalam sebuah wawancara bahwa "apa perbedaan antara css height:100%dan height:auto?"

Adakah yang bisa menjelaskan?

css Gowsikan
sumber

Jawaban:

236

height: 100% memberikan elemen 100% tinggi wadah induknya.

height: auto berarti tinggi elemen akan tergantung pada tinggi anak-anaknya.

Pertimbangkan contoh-contoh ini:

tinggi: 100%

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

#innerDiv akan miliki height: 50px

tinggi: otomatis

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

#innerDiv akan miliki height: 10px

Manish Mishra
sumber
5
Saya pikir dalam kasus 'height: auto #innerDiv akan 10px + the size it needs for its own content- lihat jsfiddle
BornToCode
@Manish Mishra: Apa desain responsif terbaik? Mengatur ketinggian elemen anak atau elemen wadah, dan membiarkan yang lain menurunkan tinggi?
John Strood
@Jack, semuanya tergantung pada apa yang terlihat, rasakan dan perilaku yang Anda harapkan dari desain Anda di berbagai layar, dan karenanya Anda menulis css Anda. Tidak ada aturan global umum seperti setting the height of the child element or the container element. Anda dapat melakukan apa pun yang Anda harus, untuk mencapai desain Anda, asalkan Anda mengikuti konsistensi tertentu, menghindari duplikasi, mengurangi kembali bekerja, mengelompokkan tata letak umum. Singkatnya, harus ada sistem / pola untuk pekerjaan Anda, sehingga mudah dibaca dan diubah, dan tentu saja fakta bahwa itu akan berfungsi
Manish Mishra
2
Saya pikir cara berpikir yang baik tentang auto adalah bahwa Anda 'tidak menyetel' hight - rasanya tidak diatur.
niico
1
Saya memodifikasi biola yang BornToCode bagikan di atas, untuk membuatnya lebih jelas yang automenyebabkan elemen tumbuh untuk mengakomodasi KEDUA kontennya, DAN konten anaknya. Sebaliknya nilai ketinggian tetap tidak menumbuhkan (atau menampilkan) konten yang tidak dapat ditampung dalam ketinggian yang dinyatakan. jsfiddle.net/m3f8y6xr/1 Jawaban ini, saya percaya, tidak cukup kata untuk membuatnya ovbious bahwa elemen akan tumbuh untuk memasukkan semua konten, apakah itu teks sendiri, atau konten anak. Tentu saja dapat diperdebatkan bahwa teksnya sendiri juga anak-anak. Ini memberikan konfirmasi visual dari perilaku tersebut.
SherylHohman
5

Sebuah ketinggian 100% adalah, mungkin, ketinggian Anda jendela batin browser , karena itu adalah ketinggian induknya , halaman. Sebuah autotinggi akan menjadi tinggi minimum dari yang diperlukan untuk mengandung .

Rohit Azad
sumber
3
Ini tidak selalu benar jika elemen induk adalah salah satu dengan tinggi yang ditentukan yang tidak sesuai dengan ukuran jendela browser
goonerify
1

Defaultnya adalah height: autodi browser, tetapi height: X%Menentukan tinggi dalam persentase blok yang mengandung.

Vahid Heydarinezhad
sumber
0

tinggi: 100% berfungsi jika wadah induk memiliki properti tinggi yang ditentukan lain, itu tidak akan berfungsi

Chukwuemeka
sumber