Div kaplama TÜM sayfası (sadece görüntü alanı değil) yapılsın mı?

97

Bu yüzden oldukça yaygın olduğunu düşündüğüm bir problemim var ama henüz iyi bir çözüm bulamadım. TÜM sayfayı kaplayan bir bindirme bölmesi yapmak istiyorum ... sadece görüntü alanını DEĞİL. Bunun neden bu kadar zor olduğunu anlamıyorum ... Gövde, html yüksekliklerini% 100 vb. Ayarlamayı denedim ama bu işe yaramıyor. Şimdiye kadar sahip olduğum şeyler:

<html>
<head>
    <style type="text/css">
    .OverLay { position: absolute; z-index: 3; opacity: 0.5; filter: alpha(opacity = 50); top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-color: Black; color: White;}
    body { height: 100%; }
    html { height: 100%; }
    </style>
</head>

<body>
    <div style="height: 100%; width: 100%; position: relative;">
        <div style="height: 100px; width: 300px; background-color: Red;">
        </div>
        <div style="height: 230px; width: 9000px; background-color: Green;">
        </div>
        <div style="height: 900px; width: 200px; background-color: Blue;"></div>
        <div class="OverLay">TestTest!</div>
    </div>


    </body>
</html>

Ayrıca varsa JavaScript'te bir çözüme de açık olurdum, ancak basit bir CSS kullanmayı tercih ederim.

html css

— Polaris878
kaynak

Daha fazlasını buradan okuyabilirsiniz: stackoverflow.com/questions/1938536/…

— Marco Demaio

Bu gerçekten jQuery ile yapılabilir mi?

— William Entriken

229

Önemli olan tek şey görüntü alanıdır, ancak muhtemelen tüm web sitesinin kaydırma sırasında bile karanlık kalmasını istersiniz. Bunun için position:fixedyerine kullanmak istiyorsunuz position:absolute. Sabit, siz kaydırdıkça öğeyi ekranda sabit tutar ve tüm gövdenin karartılmış olduğu izlenimini verir.

Örnek: http://jsbin.com/okabo3/edit

div.fadeMe {
  opacity:    0.5; 
  background: #000; 
  width:      100%;
  height:     100%; 
  z-index:    10;
  top:        0; 
  left:       0; 
  position:   fixed; 
}

<body>
  <div class="fadeMe"></div>
  <p>A bunch of content here...</p>
</body>

— Sampson
kaynak

3

Yanılıyor olabilirim, ancak sabit çalışmayı IE6'da konumlandıracak mı ?! Muhtemelen artık IE6'yı kimsenin umursamadığını biliyorum.

— Marco Demaio

29

@Marco Emin değilim. Dürüst olmak gerekirse, 10 yaşındaki bir tarayıcı için destek açıkça talep edilmezse, artık rahatsız etmeyeceğim :)

— Sampson

5

Peki bunu mobil cihazlarda nasıl yapıyorsunuz? bradfrostweb.com/blog/mobile/fixed-position

— BorisOkunskiy

3

+1 Teşekkürler! Örneğinizi

— kol

<select>Bununla ilgili yaşadığım sorun (birçok eklenti tarafından kullanılan), iOS'ta bir öğeyi tıkladığınızda tüm görüntü alanını hareket ettirir ve temelde her şeyi bozar. sabit öğeler hareket eder, kaydırılmaması gereken şeyler vb.

— billynoah

16

body:before {
    content: " ";
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
}

— Nate Barr
kaynak

2

Orada mümkün olan en iyi çözüm. Sadece body için "overlayed" sınıfı açıp kapayın ve yukarıdaki stili bu className ile gövdeye uygulayın.

— Sviatoslav Zalishchuk

3

Lütfen bu cevabı biraz daha açıklayınız. Sviatoslav'ın yorumunu anlamıyorum.

— Lonnie Best

1

Her şeyden önce, görüntü alanının ne olduğunu yanlış anladığınızı düşünüyorum. Görüntü alanı, tarayıcının web sayfalarını oluşturmak için kullandığı alandır ve hiçbir şekilde bu alanı geçersiz kılmak için web sitelerinizi oluşturamazsınız.

İkinci olarak, overlay-div'inizin tüm görüntü alanını kapsamamasının nedeni, BODY ve HTML'deki tüm kenar boşluklarını kaldırmanız gerektiğidir.

Bunu stil sayfanızın en üstüne eklemeyi deneyin - tüm öğelerdeki tüm kenar boşluklarını ve dolguları sıfırlar. Daha fazla geliştirmeyi kolaylaştırır:

* { margin: 0; padding: 0; }

Düzenleme: Sorunuzu daha iyi anladım. Position: fixed; Jonathan Sampson'ın yazdığı gibi muhtemelen sizin için çalışacaktır.

— Arve Systad
kaynak

1

Her şeyden dolgu ve kenar boşluklarını kaldırmamalısınız . Bunları düğmeler gibi birçok öğe için geri almak ve girişleri oluşturmak gerçekten zahmetli olabilir.

— Sampson

1

Kanımca, tarayıcılarda her şeye aynı şekilde davranmanın gerçekten kolay bir yolu. Bugün, daha önce IE5'e adapte olurken olduğu kadar uygulanmayabilir, ancak yine de bunu bir stil sayfasında yazdığım ilk şeylerden biri olarak yapıyorum.

— Arve Systad

3

@Arve Sizi yakınlaştırır, ancak bunun yerine zaman içinde test edilmiş bir sıfırlama sayfası kullanmak daha iyidir. Daha fazla bilgi için meyerweb.com/eric/tools/css/reset adresini ziyaret edin - seveceksiniz, sizi temin ederim :)

— Sampson

Bunu gördüm ve çok büyük olduğunu düşünüyorum :)

— Arve Systad

1

@Arve Sıfırlamalar o kadar büyük değil - tamamen kurtarmayı deneyin *{}ve çok daha fazlasını göreceksiniz :)

— Sampson

0

Yer paylaşımının içindeki bilgilerin metnin üzerinde kaydırılabilir olmasını istediğimden, kaplamayı yerinde DÜZELTME yapmak istemediğim için oldukça sorun yaşadım. Kullandım:

<html style="height=100%">
   <body style="position:relative">
      <div id="my-awesome-overlay" 
           style="position:absolute; 
                  height:100%; 
                  width:100%; 
                  display: block">
           [epic content here]
      </div>
   </body>
</html>

Elbette ortadaki div'in biraz içeriğe ve muhtemelen şeffaf gri bir arka plana ihtiyacı var ama eminim özü anladınız!

— Benjamin Vaughan
kaynak

-6

Nate Barr'ın yukarıdaki yanıtına baktım, beğenmişsiniz gibi. Basit olandan çok farklı görünmüyor

html {background-color: grey}

— Justin Munce
kaynak