Jadikan bodi memiliki 100% tinggi browser


845

Saya ingin membuat tubuh memiliki 100% tinggi browser. Bisakah saya melakukannya menggunakan CSS?

Saya mencoba pengaturan height: 100%, tetapi tidak berhasil.

Saya ingin mengatur warna latar belakang untuk sebuah halaman untuk mengisi seluruh jendela browser, tetapi jika halaman tersebut memiliki sedikit konten saya mendapatkan bilah putih jelek di bagian bawah.


Jawaban:


1092

Coba atur tinggi elemen html ke 100% juga.

html, 
body {
    height: 100%;
}

Badan melihat ke induknya (HTML) untuk cara mengukur properti dinamis, sehingga elemen HTML juga perlu diatur ketinggiannya.

Namun isi tubuh mungkin perlu berubah secara dinamis. Mengatur ketinggian minimum hingga 100% akan mencapai tujuan ini.

html {
  height: 100%;
}
body {
  min-height: 100%;
}

6
terima kasih, ini sepertinya menghapus bilah putih pada halaman pendek, tapi sekarang pada halaman yang tingginya melebihi tinggi jendela browser saya mendapatkan bilah putih 20px di bagian bawah: |
panas badan

48
ok saya tahu! berfungsi jika saya menambahkan html, body {min-height: 100%;}: D
bodyofheat

12
Catatan: jika Anda menggunakan body {min-height}versi maka Anda tidak dapat menggunakan .body-child{height: 100%}trik.
Salman A

14
jawaban terbaik adalah dengan CSS3, menggunakan vh-> body { height: 100vh }- periksa jawaban di sini stackoverflow.com/a/25829844/2680216
Adriano Resende

2
@ bFunc Saya punya masalah krom ini. html {height: 100%;} body {height: auto} melakukan pekerjaan.
GBMan

217

Sebagai alternatif untuk mengatur ketinggian elemen htmldan , Anda juga bisa menggunakan panjang viewport-persentase.body100%

5.1.2. Panjang persentase viewport: unit 'vw', 'vh', 'vmin', 'vmax'

Panjang viewport-persentase relatif terhadap ukuran blok berisi awal. Ketika tinggi atau lebar blok yang mengandung awal diubah, mereka diskalakan sesuai.

Dalam hal ini, Anda bisa menggunakan nilai 100vh- yang merupakan ketinggian viewport.

Contoh Di Sini

body {
  height: 100vh;
  padding: 0;
}
body {
  min-height: 100vh;
  padding: 0;
}

Ini didukung di sebagian besar browser modern - dukungan dapat ditemukan di sini .


4
Selain fakta bahwa ini sangat sederhana, ada baiknya kita mengadopsi praktik baru.
Pan Wangperawong

3
@ Neaster saya pasti setuju. Dukungan peramban telah meningkat sejak saya mengirimkan jawaban ini juga :)
Josh Crozier

1
@inkarnasi Ya .. terlalu buruk bukan :) Sepertinya OP terakhir kali online adalah pada 7/11/11 (tanggal pertanyaan diajukan ..) Jadi saya ragu itu akan berubah.
Josh Crozier

18
Tidak yakin mengapa kita perlu mulai "mengadopsi praktik baru" ketika praktik lama berfungsi dengan baik. Tidak ada keuntungan untuk melakukan ini: kodenya tidak lebih kecil, juga tidak melakukan lebih baik, dan masih ada browser di luar sana yang tidak mendukung vw / vh.
cimmanon

3
Stylesheet agen pengguna Chrome menambahkan margin 8px ke tubuh secara default (tidak yakin tentang browser lain), jadi saya juga harus menambahkan margin: 0;untuk menghindari bilah gulir vertikal persisten di sebelah kanan.
Andy Raddatz

121

Jika Anda memiliki gambar latar belakang maka Anda ingin mengatur ini sebagai gantinya:

html{
  height: 100%;
}
body {
  min-height: 100%;
}

Ini memastikan bahwa tag tubuh Anda dibiarkan terus bertambah ketika konten lebih tinggi dari viewport dan gambar latar belakang terus berulang / gulir / apa pun saat Anda mulai menggulir ke bawah.

Ingat, jika Anda harus mendukung IE6, Anda harus menemukan cara untuk masuk ke dalam height:100%tubuh, IE6 memperlakukan heightseperti min-heightitu.


Juga berfungsi ketika ada global flexbox tepat di bawah body (body> # flexbox-wrapper)
justnorris

2
Ini adalah jawaban yang benar, karena jawaban yang diterima tidak akan bertambah karena kontennya lebih lama dari satu layar.
SimplGy

Terima kasih banyak, Angry Dan, ruang putih jelek di bagian bawah situs saya hilang!
Boris Burkov

Tentu saja, karena pertanyaan ini diajukan, lihat dimensi berbasis port menjadi Benda. Jadi sekarang Anda bisa melakukannyabody{min-height: 100vh}
Angry Dan

Anda juga perlu body { height: auto; }agar scrollbar tidak ditampilkan di FireFox. selain itu, berfungsi dengan sempurna.
Torxed

82

Jika Anda ingin mempertahankan margin di badan dan tidak ingin bilah gulir, gunakan css berikut:

html { height:100%; }
body { position:absolute; top:0; bottom:0; right:0; left:0; }

Pengaturan body {min-height:100%} akan memberi Anda bilah gulir.

Lihat demo di http://jsbin.com/aCaDahEK/2/edit?html,output .


7
Terima kasih atas satu-satunya jawaban yang bekerja :) Saya menganggap 'absolut' membuatnya bekerja
Dmitry Matveev

Bekerja dengan baik untuk saya di Firefox tanpa scrollbar, terima kasih. Jawaban yang diterima tidak.
Andrew

@Andrew Anehnya, ini memberikan scroll-bar di FireFox. Namun apa yang Anda butuhkan untuk jawaban yang diterima ada height: auto;dalam bodyklausa juga untuk scrollbar sekarang muncul.
Torxed

@ Tror saya masih mendapatkan scroll bar di FireFox dengan ini juga. Menambahkan pengaturan otomatis ke ketinggian sepertinya tidak berhasil untuk saya :(
Travis Crum

Ini tidak berfungsi untuk saya di Chrome 56.0.2924.87 (64-bit).
Ryan


24

Setelah menguji berbagai skenario, saya yakin ini adalah solusi terbaik:

html {
    width: 100%;
    height: 100%;
    display: table;
}

body {
    width: 100%;
    display: table-cell;
}

html, body {
    margin: 0px;
    padding: 0px;
}

Ini dinamis karena elemen html- bodyelemen akan berkembang secara otomatis jika isinya meluap. Saya menguji ini di versi terbaru dari Firefox, Chrome, dan IE 11.

Lihat biola penuh di sini (untuk pembenci meja Anda di luar sana, Anda selalu dapat mengubahnya untuk menggunakan div):

https://jsfiddle.net/71yp4rh1/9/


Dengan itu, ada beberapa masalah dengan jawaban yang diposting di sini .

html, body {
    height: 100%;
}

Menggunakan CSS di atas akan menyebabkan html dan elemen tubuh TIDAK secara otomatis meluas jika isinya meluap seperti yang ditunjukkan di sini:

https://jsfiddle.net/9vyy620m/4/

Saat Anda menggulir, perhatikan latar belakang berulang? Hal ini terjadi karena ketinggian elemen tubuh BUKAN meningkat karena meja anaknya meluap. Mengapa tidak berkembang seperti elemen blok lainnya? Saya tidak yakin. Saya pikir browser salah menangani ini.

html {
    height: 100%;
}

body {
    min-height: 100%;
}

Mengatur ketinggian minimum 100% pada tubuh seperti ditunjukkan di atas menyebabkan masalah lain. Jika Anda melakukan ini, Anda tidak dapat menentukan bahwa div anak atau tabel mengambil persentase tinggi seperti yang ditunjukkan di sini:

https://jsfiddle.net/aq74v2v7/4/

Semoga ini bisa membantu seseorang. Saya pikir browser menangani ini dengan tidak benar. Saya berharap tinggi tubuh secara otomatis menyesuaikan tumbuh lebih besar jika anak-anak meluap. Namun, itu tampaknya tidak terjadi ketika Anda menggunakan tinggi 100% dan lebar 100%.


3
Saya mencoba semua jawaban pilihan tinggi di halaman ini, tetapi tidak ada yang berhasil. Yang ini!
Ryan

Jawaban ini harus diterima. Ini height: 100vhbukan solusi juga. Mengatur wadah atas Anda menjadi 100vhtinggi dan 100vwdapat menyebabkan masalah jika wadah tersebut memiliki bilah gulir - maka akan lebih besar dari seharusnya (dan mungkin menyebabkan bilah gulir terlihat tidak perlu). Hal ini height: 100vhjuga menyebabkan masalah bagi kami pada perangkat Android yang lebih baru (misalnya Xiaomi Mi 9 dengan Android 9), di mana wadah akan lebih besar dari layar itu sendiri, dan akan membuat bilah gulir vertikal yang tidak perlu ke badan dokumen.
jtompl

21

Apa yang saya gunakan pada awal setiap file CSS yang saya gunakan adalah sebagai berikut:

html, body{
    margin: 0;

    padding: 0;

    min-width: 100%;
    width: 100%;
    max-width: 100%;

    min-height: 100%;
    height: 100%;
    max-height: 100%;
}

Margin 0 memastikan bahwa elemen HTML dan BODY tidak diposisikan secara otomatis oleh browser untuk memiliki ruang di sebelah kiri atau kanannya.

Padding 0 memastikan bahwa elemen-elemen HTML dan BODY tidak secara otomatis mendorong semuanya ke bawah atau ke kanan karena default browser.

Varian lebar dan tinggi disetel ke 100% untuk memastikan bahwa peramban tidak mengubah ukurannya untuk mengantisipasi sebenarnya memiliki margin atau bantalan otomatis, dengan set min dan maks untuk berjaga-jaga jika terjadi hal-hal aneh dan tidak dapat dijelaskan terjadi, meskipun Anda mungkin tidak membutuhkannya.

Solusi ini juga berarti bahwa, seperti yang saya lakukan ketika saya mulai pada HTML dan CSS beberapa tahun yang lalu, Anda tidak akan harus memberikan pertama Anda <div>seorang margin:-8px;untuk membuatnya sesuai di sudut jendela browser.


Sebelum saya memposting, saya melihat proyek CSS fullscreen saya yang lain dan menemukan bahwa semua yang saya gunakan hanya body{margin:0;}ada dan tidak ada yang lain, yang telah bekerja dengan baik selama 2 tahun saya telah mengerjakannya.

Semoga jawaban terinci ini membantu, dan saya merasakan sakit Anda. Di mata saya, sangat bodoh bahwa browser harus menetapkan batas yang tidak terlihat di sisi kiri dan kadang-kadang bagian atas elemen tubuh / html.


Bisakah Anda jelaskan, apa tujuan yang mungkin dari width: 100%elemen tubuh dan html? Ya, saya mengerti, bahwa dari sudut pandang praktis, body { margin: 0; }harus cukup dalam banyak kasus. Saya hanya ingin mengerti lebih menyeluruh.
john cj

21

Pembaruan cepat

html, body{
    min-height:100%;
    overflow:auto;
}

Solusi yang lebih baik dengan CSS hari ini

html, body{ 
  min-height: 100vh;
  overflow: auto;
}

2
Bagaimana hal ini menawarkan sesuatu yang berbeda dari jawaban yang ada?
cimmanon

3
Saya sudah mencoba yang lain juga, tetapi tidak berhasil untuk saya. Yang ini berhasil, sehingga bisa menjadi solusi bagi seseorang yang membutuhkan. @cimmanon
Jayant Varshney

Saya harus mengatakan ini bekerja untuk saya selain jawaban suara tinggi lainnya. overflow: autodi sini lakukan keajaiban. Btw saya menggunakan Chrome.
SkuraZZ

Hanya opsi (saya telah menemukan) yang memungkinkan untuk konten yang melimpah untuk mengubah ukuran ketinggian.
Daniel Sharp

6

Sini:

html,body{
    height:100%;
}

body{
  margin:0;
  padding:0
  background:blue;
}

4

Anda juga dapat menggunakan JS jika diperlukan

var winHeight = window.innerHeight    || 
document.documentElement.clientHeight || 
document.body.clientHeight;

var pageHeight = $('body').height();
if (pageHeight < winHeight) {
    $('.main-content,').css('min-height',winHeight)
}

Tetapi untuk ini, Anda perlu menambahkan lebih banyak hal dari yang dibutuhkan seperti pustaka jQuery dan menulis dalam JavaScript sementara ini dapat dilakukan dalam CSS.
Pengembang Front-end

3

Mencoba

<html style="width:100%; height:100%; margin: 0; padding: 0;">
<body style="overflow:hidden; width:100%; height:100%; margin:0; padding:0;">

2
Bisakah Anda jelaskan, apa tujuan yang mungkin dari width: 100%elemen tubuh dan html? Ya, saya mengerti, bahwa dari sudut pandang praktis, body { margin: 0; }harus cukup dalam banyak kasus. Saya hanya ingin mengerti lebih menyeluruh.
john cj

3

Silakan periksa ini:

* {margin: 0; padding: 0;}    
html, body { width: 100%; height: 100%;}

Atau coba metode baru Viewport height:

html, body { width: 100vw; height: 100vh;}

Viewport: Jika Anda menggunakan viewport berarti apa pun ukuran layar konten akan datang tinggi penuh untuk layar.


Harap sertakan penjelasan tentang solusi Anda sehingga orang lain yang menemukan jawaban ini dapat memahami. Terima kasih!
Shawn

Bisakah Anda jelaskan, apa tujuan yang mungkin dari width: 100%elemen tubuh dan html?
john cj

jadi katakanlah saya memiliki tabel dengan 50 kolom dan 1000 baris yang memiliki angka antara 1000 hingga 9999, apa yang akan terjadi pada mereka, apakah mereka akan menggulir ke luar jendela seperti yang biasa kita lakukan atau akankah mereka memiliki tipe scrollbar melimpah
PirateApp

3

Jika Anda tidak ingin pekerjaan pengeditan file CSS Anda sendiri dan tentukan sendiri aturan tinggi badan, kerangka kerja CSS yang paling umum juga menyelesaikan masalah ini dengan elemen tubuh yang mengisi keseluruhan halaman, di antara masalah-masalah lain, nyaman dengan banyak ukuran viewports.

Misalnya, kerangka kerja Tacit CSS menyelesaikan masalah ini di luar kotak, di mana Anda tidak perlu mendefinisikan aturan dan kelas CSS apa pun dan Anda cukup memasukkan file CSS dalam HTML Anda.


2
html {
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100%;
}
html body {
    min-height: 100%
}

Bekerja untuk semua browser utama: FF, Chrome, Opera, IE9 +. Bekerja dengan gambar dan gradien Latar Belakang. Scrollbar tersedia sesuai kebutuhan konten.


2

Saya akan menggunakan ini

html, body{
      background: #E73;
      min-height: 100%;
      min-height: 100vh;
      overflow: auto; // <- this is needed when you resize the screen
    }
<html>
    <body>
    </body>
</html>

Peramban akan digunakan min-height: 100vhdan jika entah bagaimana peramban sedikit lebih tua min-height: 100%akan menjadi mundur.

Ini overflow: autodiperlukan jika Anda ingin badan dan html memperbesar tinggi ketika Anda mengubah ukuran layar (misalnya ukuran ponsel)



1

semua jawaban 100% benar dan dijelaskan dengan baik, tetapi saya melakukan sesuatu yang baik dan sangat sederhana untuk membuatnya responsif.

di sini elemen akan mengambil 100% ketinggian tampilan port tetapi ketika datang ke tampilan seluler itu tidak terlihat baik khususnya pada tampilan potret (ponsel), jadi ketika port tampilan semakin kecil elemen akan runtuh dan tumpang tindih satu sama lain. jadi untuk membuatnya sedikit responsif di sini adalah kode. semoga seseorang akan mendapat bantuan dari ini.

<style>
.img_wrap{
      width:100%;
      background: #777;
}
.img_wrap img{
      display: block;  
      width: 100px;
      height: 100px;
      padding: 50px 0px;
      margin: 0 auto;
}
.img_wrap img:nth-child(2){
      padding-top: 0;
}
</style>

<div class="img_wrap">
  <img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
  <img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
</div>

<script>
   var windowHeight = $(window).height();
   var elementHeight = $('.img_wrap').height();

   if( elementHeight > windowHeight ){
       $('.img_wrap').css({height:elementHeight});
   }else{
       $('.img_wrap').css({height:windowHeight});
   }
</script>

di sini adalah Demo JSfiddle.


0

Sini Perbarui

html
  {
    height:100%;
  }

body{
     min-height: 100%;
     position:absolute;
     margin:0;
     padding:0; 
}

-1

Tentang ruang ekstra di bagian bawah: apakah halaman Anda merupakan aplikasi ASP.NET? Jika demikian, mungkin ada pembungkus hampir semua yang ada di markup Anda. Jangan lupa untuk menata formulir juga. Menambahkan overflow:hidden;ke formulir mungkin menghapus ruang ekstra di bagian bawah.


6
Saya tidak merekomendasikan menggunakan overflow: disembunyikan kecuali Anda memiliki alasan yang sangat bagus. Cari tahu mengapa segala sesuatu meluap dan menyesuaikan sehingga tidak akan meluap sebagai gantinya
jontro

-1
@media all {
* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
} }

Bisakah Anda jelaskan, apa tujuan yang mungkin dari width: 100%elemen tubuh dan html? Ya, saya mengerti, bahwa dari sudut pandang praktis, body { margin: 0; }harus cukup dalam banyak kasus. Saya hanya ingin mengerti lebih menyeluruh.
john cj

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.