Jadikan bodi memiliki 100% tinggi browser

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.

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%;
}

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 .

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.

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 .

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

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%.

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.

Pembaruan cepat

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

Solusi yang lebih baik dengan CSS hari ini

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

Sini:

html,body{
    height:100%;
}

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

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)
}

Mencoba

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

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.

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.

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.

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)

Hanya dengan 1 baris CSS ... Anda bisa menyelesaikannya.

body{ height: 100vh; }

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.

Sini Perbarui

html
  {
    height:100%;
  }

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

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.

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

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

CSS3 memiliki metode baru.

 height:100vh

Itu membuat ViewPort 100% sama dengan tinggi.

Jadi Kode Anda seharusnya

 body{
 height:100vh; 
 }