Saya mencoba untuk mengatur <div>
untuk persentase tertentu tinggi dalam CSS, tapi itu hanya tetap dengan ukuran yang sama dengan konten di dalamnya. Ketika saya menghapus HTML 5 <!DOCTYTPE html>
namun, bekerja, <div>
mengambil seluruh halaman seperti yang diinginkan. Saya ingin halaman untuk memvalidasi, jadi apa yang harus saya lakukan?
Aku punya CSS ini pada <div>
, yang memiliki ID halaman
:
#page {
padding: 10px;
background-color: white;
height: 90% !important;
}
saya mencoba untuk membuat sebuah div untuk persentase tertentu tinggi dalam CSS
Persentase dari apa?
Untuk mengatur persentase yang tinggi, untuk elemen induk(*) harus memiliki eksplisit tinggi. Hal ini cukup jelas, bahwa jika anda meninggalkan ketinggian seperti auto
, blok akan mengambil ketinggian isinya... tapi jika konten itu sendiri memiliki ketinggian dinyatakan dalam persentase dari orang tua anda've membuat diri anda sedikit Menangkap 22. Browser menyerah dan hanya menggunakan konten yang tinggi.
Jadi orang tua div harus eksplisit tinggi
properti. Sementara yang tinggi juga dapat menjadi persentase jika anda ingin, itu hanya memindahkan masalah ke tingkat berikutnya.
Jika anda ingin membuat div tinggi persentase tinggi viewport, setiap nenek moyang div, termasuk <html>
dan <body>
, harus height: 100%
, jadi ada rantai eksplisit persentase ketinggian turun ke div.
(*: atau, jika div diposisikan, yang 'mengandung block', yang terdekat leluhur juga akan diposisikan.)
Selain itu, semua browser modern dan IE>=9 dukungan CSS baru unit relatif terhadap tinggi viewport (vh
) dan lebar viewport (vw
):
div {
height:100vh;
}
Lihat disini untuk info lebih lengkap.
Anda perlu untuk mengatur ketinggian pada <html>
dan <body>
elemen-elemen; jika tidak, mereka hanya akan menjadi cukup besar untuk muat konten. Misalnya:
<!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>
bobince's jawaban akan membiarkan anda tahu di mana kasus "tinggi: XX%;" akan atau tidak't bekerja.
Jika anda ingin membuat sebuah elemen dengan mengatur ratio (tinggi: % it's sendiri lebar), cara terbaik untuk melakukannya adalah dengan efektif pengaturan ketinggian menggunakan padding-bottom
. Contoh untuk square:
<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%;
}
Alun-alun wadah bisa terbuat dari padding, dan content akan memperluas untuk mengisi wadah. Artikel panjang dari tahun 2009 tentang subjek ini: http://alistapart.com/article/creating-intrinsic-ratios-for-video
Anda dapat menggunakan 100vw / 100vh
. CSS3 memberikan kita pandang-relatif unit. 100vw berarti 100% dari lebar viewport. 100vh; 100% dari ketinggian.
<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>
Hi! Dalam rangka untuk menggunakan persentase(%), anda harus menentukan % dari elemen induk. Jika anda menggunakan body{height: 100%} ini tidak akan bekerja karena orang tua tidak memiliki persentase yang tinggi. Dalam kasus itu dalam rangka untuk bekerja tinggi badan anda harus menambahkan ini di html{height:100%}
Dalam kasus lain untuk menyingkirkan yang mendefinisikan induk persentase anda dapat menggunakan
body{height:100vh}
vh singkatan tinggi viewport
Saya pikir itu membantu
Kadang-kadang, anda mungkin ingin kondisional mengatur tinggi dari sebuah div, seperti ketika seluruh konten adalah kurang dari tinggi layar. Pengaturan semua orang tua elemen 100% akan memotong konten yang ketika itu lebih panjang dari ukuran layar.
Jadi, cara untuk mendapatkan sekitar ini adalah untuk mengatur min-height:
Terus membiarkan orang tua elemen secara otomatis menyesuaikan tinggi Kemudian di div utama, kurangi ukuran pixel dari header dan footer div dari 100vh (viewport unit). Dalam css, sesuatu seperti:
min-height: calc(100vh - 246px);
100vh adalah panjang penuh layar, minus sekitarnya div. Dengan menetapkan min-tinggi dan tidak tinggi, konten lebih lama dari layar akan terus mengalir, bukannya dipotong.