<body> tüm ekranı doldursun mu?

129

Web sayfamın arka planı olarak radyal gradyan kullanıyorum, örneğin:

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

Çalışır, ancak içerik tüm sayfayı doldurmadığında degrade kesilir. <body>Öğenin her zaman tüm sayfayı doldurmasını nasıl sağlayabilirim ?

html css radial-gradients

— Ry-
kaynak

2

Ve body { width: 100%; height: 100%; }çalışmıyor mu?

— Alex

Bu css parçası body etiketine uygulandı değil mi? Güncel Chrome jsfiddle.net/kdjFD/embedded/result'da benim için harika çalışıyor . Hangi tarayıcıyı test ediyorsunuz?

— LeRoy

4

Hayır, body { width: 100%; height: 100%; }çalışmıyor. Sanırım onu da uygulamalıyım <html>.

— Ry-

Eski -webkit- sözdizimini kullanmayın. Resmi W3C sözdizimini kullanın

— Tim Nguyen

@TimNguyen: Bu soru üç yıl önce, bunun için tarayıcı desteği olmadığında sorulmuştu.

— Ry-

201

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

— capdragon
kaynak

18

Görünüşe göre tek gereken html { height: 100%; }aslında.

— Ry-

30

Ne benim için yeterli ne html { height: 100%; }de body { height: 100%; }benim için (Opera bir test olarak dahil edildi) En iyi sonuç html, body { min-height: 100%; }, minimum yükseklik yerine yükseklik kullanmak, sayfamın ortasındaki bazı katlanabilir div'leri genişlettiğimde arka plan rengi uygulanmadan arka plan rengini beyaz bıraktı. min-heightbunu düzeltti.

— Stephen P

1

Bu sorun neden yalnızca arka plan kullanılırken oluyor: doğrusal gradyan ve basit arka planla değil

— ASEN

@ASEN Bunun neden olduğunu hiç çözdünüz mü?

— dantelli

2

Yine herkes için çalışmıyor, sadece değiştirmek 100%için 100vh.

— PolymorphismPrince

27

Sitemizde içeriğin statik olduğu sayfalar ve AJAX ile yüklendiği sayfalar var. Bir sayfada (bir arama sayfasında), AJAX sonuçlarının sayfayı doldurmaktan fazlasını yaptığı durumlar ve sonuç döndürmediği durumlar vardı. Arka plan resminin her durumda sayfayı doldurması için aşağıdaki CSS'yi uygulamamız gerekiyordu:

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

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

heightiçin htmlve min-heightiçin body.

— jwatts1980
kaynak

1

İkisinin de ihtiyacı yok width: 100%;.

— Ry-

1

görüntülenme nedeniyle: engelleme yapısı

— Valen

ayrıca margin: 0;yeterli, hangi birimi kullanacağınızı belirtmenize gerek yok

— KameeCoding

15

Diğer yanıtların hiçbiri benim için işe yaramadığı için, bunu, aynı sorunu bulan bir çözüm arayan diğerlerine yanıt olarak göndermeye karar verdim. Hem html hem de gövdenin ayarlanması gerekiyordu, min-heightyoksa degrade vücut yüksekliğini doldurmayacaktı.

Buna doğru cevabı vermek için Stephen P'nin yorumunu buldum .

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

arka plan dolgusu gövde yüksekliği

Html (veya html ve body) yüksekliğini% 100 olarak ayarladığımda,

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

arka plan gövdeyi doldurmuyor

— Topluluk
kaynak

12

Hem html hem de body için% 100 uygulamak zorunda kaldım.

— htrufan
kaynak

4

Vücut düzeyinde görüntü alanı (vh, vm) ölçü birimlerini kullanmayı deneyin

html, gövde {margin: 0; dolgu: 0; } gövde {min-yükseklik: 100vh; }

Gövde üzerindeki yatay kenar boşlukları, dolgular ve sınırlar için vh birimlerini kullanın ve bunları minimum yükseklik değerinden çıkarın.

Vh, vm birimlerini vücuttaki öğeler üzerinde, özellikle yeniden boyutlandırırken kullanarak tuhaf sonuçlar aldım.

— Mike Wright
kaynak

1

Bence büyük ölçüde doğru olan yol, css'i buna ayarlamak:

html
{
    overflow: hidden;
}

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

html, body
{
    height: 100%;
}

— Martin Wantke
kaynak

Bunun önemli kısımları altı yıl önce kabul edilen cevapla aynı üzgünüm.

— Ry-

1

Yukarıdaki tüm çözümleri denedim ve hiçbirini gözden düşürmüyorum, ancak benim durumumda işe yaramadılar.

Benim için sorun, <header>etiketin margin-top5em olması ve <footer>kenar boşluğunun 5em olmasıdır. Onları kaldırdım ve yerine biraz koydum padding(sırasıyla üst ve alt). Kenar boşluğunu değiştirmenin sorun için ideal bir çözüm olup olmadığından emin değilim, ancak önemli olan şu ki, eğer sizdeki ilk ve son elemanların <body>bazı kenar boşlukları varsa, ona bakıp bunları kaldırmak isteyebilirsiniz.

Benim htmlve bodyetiketleri aşağıdaki stildelerdi

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

html {
  min-height: 100%;
  background-color: #3c3c3c; }

— dinika saxena
kaynak

1

Eğer varsa sahip bir sınır veya dolgu, daha sonra çözelti

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

Snippet'i genişlet

kusurlu görüntülemeyi üretir

Bir sınır veya dolgu varlığında bunu doğru yapmak için

onun yerine kullan

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

Snippet'i genişlet

Martin'in işaret ettiği gibi , overflow: hiddengerekli olmasa da.

(2018 - Chrome 69 ve IE 11 ile test edildi)

— Vrokipal
kaynak

Cevabınız yalnızca sizinle ilgilidir ve bodyetikete bir çerçeve eklediğiniz için . Bu sınır olmadan body, görüntü alanının tam olarak% 100'ünü dolduracaktır, bunu örneğin bir arka plan rengiyle görebilirsiniz. 7 yıl önce kabul edilen bu sorunun doğru cevabı halen geçerlidir.

— Niss

-1

Bu benim için çalışıyor:

<!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
kaynak

Sorun ne değildi, üzgünüm. Yine de işinize yarayan bir şey bulduğunuza sevindim.

— Ry-