Buat <body> mengisi seluruh layar?

129

Saya menggunakan gradien radial sebagai latar belakang pada halaman web saya, seperti:

background-image: -webkit-gradient(radial, 100% 100%, 10, 90% 90%, 600, from(#ccc), to(#000));

Ini bekerja, tetapi ketika konten tidak mengisi seluruh halaman, gradien terputus. Bagaimana saya bisa membuat <body>elemen mengisi seluruh halaman, selalu?

html css radial-gradients Ry-
sumber
2
Dan body { width: 100%; height: 100%; }tidak berhasil?
Alex
Itu sedikit css diterapkan pada tag tubuh, kan? Ini berfungsi baik untuk saya di Chrome jsfiddle.net/kdjFD/embedded/result Chrome terbaru . Browser apa yang Anda uji?
LeRoy
4
Tidak, body { width: 100%; height: 100%; }tidak berhasil. Saya kira saya harus menerapkannya <html>juga.
Ry-
Jangan gunakan sintaks -webkit- lama. Gunakan sintaks W3C resmi
Tim Nguyen
@TimNguyen: Pertanyaan ini ditanyakan tiga tahun lalu, ketika tidak ada dukungan browser untuk itu.
Ry-

Jawaban:

201 
html, body {
    margin: 0;
    height: 100%;
}
capdragon
sumber
18
Tampaknya yang dibutuhkan html { height: 100%; }sebenarnya.
Ry-
30
Tidak html { height: 100%; }juga body { height: 100%; }tidak cukup bagi saya (Opera disertakan sebagai tes) Apa yang paling berhasil adalah html, body { min-height: 100%; }Menggunakan tinggi alih-alih ketinggian minimum meninggalkan putih latar belakang tanpa warna latar yang diterapkan ketika saya memperluas beberapa div yang dapat dilipat di tengah halaman saya. min-heightmemperbaikinya.
Stephen P
1
Mengapa masalah ini hanya terjadi saat menggunakan latar belakang: gradien linier dan tidak dengan latar belakang sederhana
ASEN
@ ASEN Apakah Anda pernah tahu mengapa itu terjadi?
berenda
2
Jika masih tidak bekerja untuk siapa pun hanya mengubah 100%ke 100vh.
PolimorfismePrince
27

Di situs kami, kami memiliki halaman di mana kontennya statis, dan halaman di mana ia dimuat dengan AJAX. Pada satu halaman (halaman pencarian), ada kasus-kasus ketika hasil AJAX akan lebih dari mengisi halaman, dan kasus-kasus di mana itu tidak akan memberikan hasil. Agar gambar latar belakang untuk mengisi halaman dalam semua kasus, kami harus menerapkan CSS berikut:

html {
   margin: 0px;
   height: 100%;
   width: 100%;
}

body {
   margin: 0px;
   min-height: 100%;
   width: 100%;
}

heightuntuk htmldan min-heightuntuk body.

jwatts1980
sumber
1
Tak satu pun dari mereka membutuhkan width: 100%;.
Ry-
1
karena tampilan: blok alami
Valen
juga margin: 0;sudah cukup, tidak perlu menentukan unit mana yang Anda gunakan nol
KameeCoding
15

Karena tidak ada jawaban lain yang bekerja untuk saya, saya memutuskan untuk memposting ini sebagai jawaban bagi orang lain yang mencari solusi yang juga menemukan masalah yang sama. Baik html dan body perlu diatur dengan min-heightatau gradien tidak akan memenuhi tinggi badan.

Saya menemukan komentar Stephen P untuk memberikan jawaban yang benar untuk ini.

html {
    /* To make use of full height of page*/
    min-height: 100%;
    margin: 0;
}
body {
    min-height: 100%;
    margin: 0;
}

latar belakang mengisi tinggi badan

Ketika saya memiliki tinggi html (atau html dan tubuh) diatur ke 100%,

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

latar belakang tidak mengisi tubuh

Komunitas
sumber
12

Saya harus menerapkan 100% untuk html dan tubuh.

htrufan
sumber
4

Coba gunakan unit viewport (vh, vm) di tingkat tubuh

html, body {margin: 0; bantalan: 0; } body {min-height: 100vh; }

Gunakan unit vh untuk margin horizontal, paddings, dan borders pada bodi dan kurangi dari nilai min-height.

Saya mendapatkan hasil yang aneh menggunakan unit vh, vm pada elemen-elemen di dalam tubuh, terutama saat mengubah ukuran.

Mike Wright
sumber
1

Saya pikir cara yang paling benar, adalah mengatur css untuk ini:

html
{
    overflow: hidden;
}

body
{
    margin: 0;
    box-sizing: border-box;
}

html, body
{
    height: 100%;
}
Martin Wantke
sumber
Bagian penting dari ini sama dengan jawaban yang diterima enam tahun yang lalu, maaf.
Ry-
1

Saya mencoba semua solusi di atas dan saya tidak mendiskreditkan salah satu dari mereka, tetapi dalam kasus saya, mereka tidak berhasil.

Bagi saya, masalah ini disebabkan karena <header>tag memiliki margin-top5em dan <footer>margin-bottom 5em. Saya menghapusnya dan malah menaruh beberapa padding(masing-masing atas dan bawah). Saya tidak yakin apakah mengganti margin adalah perbaikan yang ideal untuk masalah tersebut, tetapi intinya adalah bahwa, jika elemen pertama dan terakhir dalam Anda<body> memiliki beberapa margin, Anda mungkin ingin melihatnya dan menghapusnya.

Tag saya htmldan bodymemiliki gaya berikut

body {
  line-height: 1;
  min-height: 100%;
  position: relative; }

html {
  min-height: 100%;
  background-color: #3c3c3c; }
dinika saxena
sumber
1

Jika Anda memiliki pembatas atau bantalan, maka solusinya

html, body {
    margin: 0;
    height: 100%;
}
body {
    border: solid red 5px;
    border-radius: 2em;
}
Luaskan cuplikan

menghasilkan rendering yang tidak sempurna

tidak baik

Untuk memperbaikinya dengan adanya pembatas atau bantalan

baik

gunakan saja

html, body {
    margin: 0;
    height: 100%;
}
body {
    box-sizing: border-box;
    border: solid red 5px;
    border-radius: 2em;
}
Luaskan cuplikan

seperti yang ditunjukkan Martinoverflow: hidden tidak diperlukan.

(2018 - diuji dengan Chrome 69 dan IE 11)

Vrokipal
sumber
Jawaban Anda hanya relevan untuk Anda, dan karena Anda menambahkan batas pada bodytag. Tanpa batas itu, bodyakan mengisi tepat 100% dari viewport, Anda dapat melihatnya dengan warna latar misalnya. Jawaban yang benar untuk pertanyaan itu diterima 7 tahun yang lalu masih valid.
Niss
-1

Ini bekerja untuk saya: 

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title> Fullscreen Div </title>
  <style>
  .test{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10;
  }
  </style>
</head>
<body>
  <div class='test'>Some text</div>
</body>
</html>
GigiProve
sumber
Bukan apa pertanyaannya, maaf. Senang Anda menemukan sesuatu yang bekerja untuk Anda.
Ry-