Ekran boyunca uzanan ancak gövde etiketinde olmayan yatay bir çubuk nasıl oluşturulur?

Question

Çok basit bir soru!

Kendim gövde etiketi boyunca kendini tekrarlayan bir arka plan desenim var. Ayrıca x ekseni üzerinde tekrarlamak için bir üst çubuk ve alt çubuk (baş/altbilgi) olmasını isterim - arka plan için tekrar düz renk, desen ve düz renkteki hoş bir sandviç stili oluşturur.

Bu nasıl başarılabilir?

Çubukların% 100 genişliğe sahip olması gerekir; bu nedenle, içerik sarmalayıcı veya üstbilgi/altbilgi div yoluyla 1000 piksel genişliğe ayarlandığından bu işlem yapılmaz. Renk çubukları tüm ekran boyunca gitmelidir. You should

Answer 1

:

• Eğer html, body { margin: 0; padding: 0 }
• senin "içerik sarmalayıcı" nin #headerBar ve #footerBar dışında ekle olduğundan emin olun. Böyle

şey: http://jsfiddle.net/GDDA5/

html, body { 
    margin: 0; 
    padding: 0 
} 
#contentWrapper { 
    width: 300px; 
    margin: 0 auto; 
    background: #ccc; 
    height: 100px 
} 
#headerBar { 
    height: 40px; 
    background: blue 
} 
#footerBar { 
    height: 40px; 
    background: red 
} 

Yoksa görüntü alanına sopa ve içeriğin arkasına olmak barlar isterseniz: ben burada parite için geç kaldım http://jsfiddle.net/GDDA5/3/

Answer 2

ama css3 kullan!

#selector:after { content: '|' } 

Answer 3

işlevi içerik sarıcı div dışına altbilgi div almalı o zaman size aradığınız etkisi veren otomatik vücut genişliği boyutlarını almalıdır.