Vücudun tarayıcı yüksekliğinin% 100'üne sahip olmasını sağlayın

Vücudun tarayıcı yüksekliğinin% 100'üne sahip olmasını istiyorum. Bunu CSS kullanarak yapabilir miyim?

Ayarlamayı denedim height: 100%, ama çalışmıyor.

Bir sayfa için tarayıcı penceresinin tamamını dolduracak bir arka plan rengi ayarlamak istiyorum, ancak sayfada çok az içerik varsa, altta çirkin beyaz bir çubuk alıyorum.

Html öğesinin yüksekliğini de% 100 olarak ayarlamayı deneyin.

html, 
body {
    height: 100%;
}

Gövde, dinamik özelliğin nasıl ölçekleneceği konusunda üst öğesine (HTML) bakar, bu nedenle HTML öğesinin yüksekliğinin de ayarlanması gerekir.

Bununla birlikte, vücut içeriğinin muhtemelen dinamik olarak değişmesi gerekecektir. Minimum yüksekliği% 100'e ayarlamak bu hedefi gerçekleştirecektir.

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

Her iki ayar alternatif olarak htmlve bodykarşı eleman yüksekliklerine 100%, ayrıca görünüm penceresi-yüzdelik uzunlukları kullanabilirsiniz.

5.1.2. Görünüm yüzdesi uzunlukları: 'vw', 'vh', 'vmin', 'vmax' birimleri

Görünüm yüzdesi uzunlukları, ilk içeren bloğun boyutuna göredir. İlk içeren bloğun yüksekliği veya genişliği değiştirildiğinde, bunlar uygun şekilde ölçeklenir.

Bu örnekte, 100vhgörünümün yüksekliği olan - değerini kullanabilirsiniz .

Buraya Örnek

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

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

Bu, çoğu modern tarayıcıda desteklenir - destek burada bulunabilir .

Bir arka plan resminiz varsa, bunun yerine bunu ayarlamak istersiniz:

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

Bu, içerik görünüm penceresinden daha uzun olduğunda gövde etiketinizin büyümeye devam etmesine ve arka plan görüntüsünün aşağı kaydırmaya başladığınız sırada arka plan görüntüsünün tekrarlanmasına / kaydırılmasına devam etmesini sağlar.

IE6'yı desteklemeniz gerekiyorsa, height:100%vücut için kama yapmanın bir yolunu bulmanız gerektiğini unutmayın , IE6 yine de heightgibi davranır min-height.

Kenar boşluklarını gövde üzerinde tutmak ve kaydırma çubukları istemiyorsanız aşağıdaki css'yi kullanın:

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

Ayar body {min-height:100%} size kaydırma çubukları verecektir.

Demoyu http://jsbin.com/aCaDahEK/2/edit?html,output adresinde görebilirsiniz .

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

Çeşitli senaryoları test ettikten sonra, bunun en iyi çözüm olduğuna inanıyorum:

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

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

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

İçeriği taşarsa htmlve bodyöğelerinin otomatik olarak genişlemesi dinamiktir . Bunu Firefox, Chrome ve IE 11'in en son sürümünde test ettim.

Burada tam keman bakın (orada masa nefret edenler için, her zaman bir div kullanmak için değiştirebilirsiniz):

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

Bununla birlikte, burada yayınlanan cevaplarla ilgili birkaç sorun var .

html, body {
    height: 100%;
}

Yukarıdaki CSS'nin kullanılması, içerikleri burada gösterildiği gibi taşarsa html ve gövde öğesinin otomatik olarak genişlememesine neden olur:

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

Kaydırırken tekrarlayan arka planı fark ettiniz mi? Bunun nedeni, alt tablonun taşması nedeniyle gövde elemanının yüksekliğinin ARTIK OLMADIĞINDIR. Neden diğer blok elemanlar gibi genişlemiyor? Emin değilim. Bence tarayıcılar bunu yanlış ele alıyor.

html {
    height: 100%;
}

body {
    min-height: 100%;
}

Yukarıda gösterildiği gibi vücutta% 100'lük bir minimum yükseklik ayarlamak başka sorunlara neden olur. Bunu yaparsanız, alt div veya tablonun burada gösterildiği gibi yüzde yükseklik alacağını belirtemezsiniz:

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

Umarım bu birine yardımcı olur. Bence tarayıcılar bunu yanlış yapıyor. Çocuklarının taşması durumunda vücudun yüksekliğinin otomatik olarak daha büyük büyümesini ayarlamasını beklerdim. Ancak,% 100 yükseklik ve% 100 genişlik kullandığınızda bu görünmüyor.

Gerçekten kullandığım her CSS dosyasının başlangıcında kullandığım şey şudur:

html, body{
    margin: 0;

    padding: 0;

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

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

0 kenar boşluğu, HTML ve BODY öğelerinin tarayıcı tarafından solunda veya sağında biraz boşluk kalacak şekilde otomatik olarak konumlandırılmamasını sağlar.

0 dolgusu, HTML ve BODY öğelerinin tarayıcı varsayılanları nedeniyle içindeki her şeyi otomatik olarak aşağı veya sağa itmemesini sağlar.

Genişlik ve yükseklik değişkenleri, tarayıcının, otomatik olarak belirlenmiş bir kenar boşluğuna veya dolguya sahip olması beklentisiyle yeniden boyutlandırılmamasını sağlamak için% 100'e ayarlanmıştır; muhtemelen onlara ihtiyacım yok.

Ben ilk HTML ve CSS birkaç yıl önce yayınlanmaya başladığında yaptığı gibi bu çözüm de demektir,, ilk vermek zorunda kalmazsınız <div>a margin:-8px;bu tarayıcı penceresinin köşesinde sığacak yapmak.

Göndermeden önce, diğer tam ekran CSS projeme baktım ve kullandığım tek body{margin:0;}şeyin üzerinde çalıştığım 2 yıl boyunca iyi çalışan hiçbir şey olmadığını gördüm.

Umarım bu ayrıntılı cevap yardımcı olur ve acınızı hissediyorum. Gözlerimde, tarayıcıların vücut / html öğelerinin solunda ve bazen üst tarafında görünmez bir sınır oluşturması aptalca.

Hızlı güncelleme

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

Günümüzün CSS'siyle daha iyi bir çözüm

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

Buraya:

html,body{
    height:100%;
}

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

Gerekirse JS'yi de kullanabilirsiniz

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

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

Deneyin

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

Lütfen bunu kontrol edin:

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

Veya yeni yöntem Görüntüleme alanı yüksekliğini deneyin:

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

Viewport: Viewport'u kullandığınız ekran boyutu ne olursa olsun ekran içeriğinin tam boyuta geleceği anlamına geliyorsa.

Kendi CSS dosyanızı düzenleme ve yükseklik kurallarını kendiniz tanımlamak istemiyorsanız, en tipik CSS çerçeveleri de bu sorunu, sayfanın tamamını, diğer sorunların yanı sıra, görüntü boyutları.

Örneğin, Tacit CSS çerçevesi bu sorunu kutudan çıkarır; burada herhangi bir CSS kuralını ve sınıfını tanımlamanız gerekmez ve CSS dosyasını HTML'nize eklersiniz.

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

Tüm büyük tarayıcılar için çalışır: FF, Chrome, Opera, IE9 +. Arka plan resimleri ve degradelerle çalışır. Kaydırma çubukları içerik gereksinimi olarak kullanılabilir.

Bunu kullanırdım

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

<html>
    <body>
    </body>
</html>

Tarayıcı kullanacak min-height: 100vhve bir şekilde tarayıcı biraz daha eski ise min-height: 100%, yedek olacaktır.

overflow: autoEğer vücut istiyorum ve html (örneğin bir cep boyutu) ekranını yeniden boyutlandırmak zaman kendi yüksekliğini genişletmek eğer gerekli

Sadece 1 satır CSS ile… Bunu yapabilirsiniz.

body{ height: 100vh; }

tüm cevaplar% 100 doğru ve iyi açıklanmıştır, ancak yanıt vermek için iyi ve çok basit bir şey yaptım.

burada eleman% 100 görüş portu alacaktır, ancak mobil görünüme gelince özellikle portre görünümünde (mobil) iyi görünmüyor, bu yüzden görüş portu küçüldüğünde eleman birbirini daraltacak ve üst üste gelecektir. burada biraz duyarlı hale getirmek için kod. umarım birisi bundan yardım alır.

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

işte JSfiddle Demo.

Burada Güncelleme

html
  {
    height:100%;
  }

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

Alttaki fazladan boşluk hakkında: Sayfanız bir ASP.NET uygulaması mı? Eğer öyleyse, muhtemelen işaretlemenizde hemen hemen her şeyi sarar. Formu da şekillendirmeyi unutmayın. overflow:hidden;Forma eklemek , alttaki fazladan alanı kaldırabilir.

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

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

CSS3'ün yeni bir yöntemi var.

 height:100vh

ViewPort'u% 100 yüksekliğe eşit yapar.

Yani Kodunuz

 body{
 height:100vh; 
 }