Persentase Tinggi HTML 5 / CSS

176

Saya mencoba untuk menetapkan <div>tinggi persentase tertentu di CSS, tetapi ukurannya tetap sama dengan konten di dalamnya. Namun ketika saya menghapus HTML 5 <!DOCTYTPE html>, ia berfungsi, <div>mengambil seluruh halaman seperti yang diinginkan. Saya ingin halaman divalidasi, jadi apa yang harus saya lakukan?

Saya memiliki CSS ini di <div>, yang memiliki ID dari page:

#page {
    padding: 10px;
    background-color: white;
    height: 90% !important;
}
html css height D. Strout
sumber
3
Berikut adalah penjelasan sederhana dan jelas tentang heightproperti CSS dengan nilai persentase: stackoverflow.com/a/31728799/3597276
Michael Benjamin
mengatasi masalah DOCTYPE: stackoverflow.com/a/32215263/3597276
Michael Benjamin

Jawaban:

371

Saya mencoba untuk mengatur div ke tinggi persentase tertentu di CSS

Persentase dari apa?

Untuk mengatur persentase tinggi, elemen induknya (*) harus memiliki tinggi eksplisit. Ini cukup jelas, karena jika Anda membiarkan tinggi auto, blok akan mengambil tinggi isinya ... tetapi jika konten itu sendiri memiliki ketinggian yang dinyatakan dalam persentase orang tua Anda membuat sendiri sedikit Tangkap 22. Browser menyerah dan hanya menggunakan tinggi konten.

Jadi induk div harus memiliki heightproperti eksplisit . Sementara tinggi itu juga bisa menjadi persentase jika Anda mau, itu hanya memindahkan masalah ke tingkat berikutnya.

Jika Anda ingin menjadikan tinggi div persentase dari tinggi viewport, setiap leluhur div, termasuk <html>dan <body>, harus memiliki height: 100%, sehingga ada rantai persentase eksplisit ketinggian hingga div.

(*: atau, jika div diposisikan, 'blok berisi', yang merupakan leluhur terdekat juga diposisikan.)

Atau, semua browser modern dan IE> = 9 mendukung unit CSS baru relatif terhadap tinggi viewport ( vh) dan lebar viewport ( vw):

div {
    height:100vh; 
}

Lihat di sini untuk info lebih lanjut .

bobince
sumber
Meskipun tidak berfungsi untuk orientasi layar potret, stackoverflow.com/questions/23198237/…
Dchris
1
Silakan lihat jawabannya oleh Brian Campbell di bawah ini. Saya percaya itu adalah solusi yang tepat. Jawaban ini tampaknya merupakan solusi dan tidak membahas masalah yang sebenarnya.
Pengembang MG
69

Anda perlu mengatur ketinggian pada <html>dan <body>elemen juga; jika tidak, mereka hanya akan cukup besar untuk disesuaikan dengan konten. Sebagai contoh :

<!DOCTYPE html>
<title>Example of 100% width and height</title>
<style>
html, body { height: 100%; margin: 0; }
div { height: 100%; width: 100%; background: red; }
</style>
<div></div>
Luaskan cuplikan

Brian Campbell
sumber
6
¬_¬ Butuh waktu 20 menit untuk mencari tahu saya harus mengatur ketinggian dokumen hingga 100% juga. Saya membaca ini agak terlambat, tetapi masih sangat brilian. sigh
omninonsense
Ini harus dipilih sebagai jawaban karena memberikan solusi bagi banyak orang yang datang ke sini bertanya-tanya apa yang bisa dilakukan kebanyakan menonton jawaban pertama dan berpikir itu tidak mungkin dan berkeliaran memikirkan apakah ada metode lain yang ada tanpa membaca ini
codefreaK
Saya setuju ini adalah jawaban yang benar, ketinggian tidak berfungsi karena elemen induk yaitu body dan html perlu diatur. Jawaban ini harus menjadi jawaban yang diterima.
Pengembang MG
Ini bukan jawaban yang benar - jika konten lebih besar dari yang akan cocok dengan ketinggian layar maka sisa konten tidak lagi terlihat, sehingga tingginya TIDAK diatur ke 100% dari jendela browser tetapi lagi untuk 100% konten. Itu mungkin tidak logis, tetapi itulah yang terjadi pada dua browser utama, Firefox dan Chrome - coba saja. Jadi jawaban yang diterima adalah satu-satunya jawaban yang benar.
nepdev
15

jawaban bobince akan memberi tahu Anda dalam hal apa "tinggi: XX%;" akan atau tidak akan berhasil.

Jika Anda ingin membuat elemen dengan rasio yang ditetapkan (tinggi:% dari lebar sendiri), cara terbaik untuk melakukannya adalah dengan mengatur ketinggian menggunakan secara efektif padding-bottom. Contoh untuk persegi:

<div class="square-container">
  <div class="square-content">
    <!-- put your content in here -->
  </div>
</div>

.square-container {  /* any display: block; element */
  position: relative;
  height: 0;
  padding-bottom: 100%; /* of parent width */
}
.square-content {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

Wadah persegi hanya akan terbuat dari padding, dan konten akan diperluas untuk mengisi wadah. Artikel panjang dari 2009 tentang hal ini: http://alistapart.com/article/creating-intrinsic-ratios-for-video

Olex Ponomarenko
sumber
ini bekerja dengan baik. Peramban juga terasa cepat saat mengubah ukuran halaman yang memuat 100+ elemen. Terima kasih!
dean grande
5

Anda bisa menggunakannya 100vw / 100vh. CSS3 memberi kita unit relatif-viewport. 100vw berarti 100% dari lebar viewport. 100vh; 100% tinggi.

    <div style="display:flex; justify-content: space-between;background-color: lightyellow; width:100%; height:85vh">
        <div style="width:70%; height: 100%; border: 2px dashed red"></div>
        <div style="width:30%; height: 100%; border: 2px dashed red"></div>
    </div>
Ahmad Aghazadeh
sumber
4

Hai! Untuk menggunakan persentase (%), Anda harus menentukan% dari elemen induknya. Jika Anda menggunakan tubuh {tinggi: 100%} itu tidak akan berfungsi karena orang tuanya tidak memiliki persentase tinggi badan. Dalam hal ini agar dapat bekerja dengan tinggi badan itu, Anda harus menambahkan ini dalam html {height: 100%}

Dalam kasus lain untuk menyingkirkan persentase orang tua yang dapat Anda gunakan

tubuh {tinggi: 100vh}

vh adalah singkatan dari viewport height

Saya pikir itu membantu

Md A. Barik
sumber
2

Terkadang, Anda mungkin ingin mengatur ketinggian div secara bersyarat, seperti ketika seluruh konten kurang dari ketinggian layar. Mengatur semua elemen induk ke 100% akan memotong konten ketika lebih panjang dari ukuran layar.

Jadi, cara untuk mengatasi ini adalah dengan mengatur ketinggian min:

Terus biarkan elemen induk secara otomatis menyesuaikan ketinggiannya. Kemudian di div utama Anda, kurangi ukuran piksel header dan footer div dari 100vh (unit viewport). Dalam css, sesuatu seperti:

min-height: calc (100vh - 246px);

100vh adalah panjang penuh layar, minus div sekitarnya. Dengan mengatur tinggi minimum dan bukan tinggi, konten yang lebih panjang dari layar akan terus mengalir, bukannya terputus.

Jahmic
sumber