Div ve çocuk div'unu en azından tarayıcı penceresinin tam yüksekliğini uzatın

Ana gövde div'ımın sol ve sağ tarafları boyunca uzanan görüntülere (aslında div altında bir tür gölge efekti etkisi için) ihtiyacım var.Div ve çocuk div'unu en azından tarayıcı penceresinin tam yüksekliğini uzatın

ben bu genişletilebilir olmak div istiyoruz ve bunu IE7 ve IE8 çalışmak gerekiyor ve bunun en azından altına uzatmak istiyorum aslında olmasaydı bu basit olurdu sayfa.

CSS3 sihirbazını almak için polyfills kullanmayı denedim ama çalışmadılar (PIE'yi ve bazı filtreleri şanssız bir şekilde denedim).

Her şeyi denediğimi hissediyorum ... ki bu da beni buraya getiriyor!

html,body{ 
    height: 100% 
} 
.left-image{ 
    background: transparent url('image/url.png') repeat-y top left; 
    min-height: 100%; /*this alone works for making outer div extend browser & content height*/ 
    min-width: 960px; 
    max-width: 1280px; 
    margin: 0 auto; 
} 
.right-image{ 
    background: transparent url('image/url.png') repeat-y top left; 
    height: 100%; /*this only makes the div the height of its content*/ 
}

: Aşağıdaki css ile

<div class="left-image"> 
<div class="right-image"> 
main body text 
</div> 
</div>

: Ben çalışmak için elde edebilmek ancak şu ana kadar hiçbir puro gerektiği gibi Ancak bu kadar sadece CSS/html yoluyla kazanılmış ettik gibidir, hissediyorum

Bu, tarayıcı penceresinin yüksekliğini veya içeriğin yüksekliğini (hangisi daha büyükse) dolduran .left-image div'ini (ancak hangisi daha büyükse), ancak içeriğin yüksekliğini sığdırmak için .right-image div ile sonuçlanır. tarayıcı penceresinden daha küçükse doldurmaz.

Bunun herhangi bir yolu var mı? Sadece jQuery'yi kullan?

kaynak

2012-01-22 Sabrina Leggett

Bu, kolay bir çözüm olmadan sık karşılaşılan bir sorundur. CSS3 bunu çözecek ancak daha eski tarayıcıları destekleyecektir, onun yakında herhangi bir zamanda gitmeyeceği anlamına gelir.

çek dışarı

http://www.alistapart.com/articles/fauxcolumns/

ve bu doğru yönde işaret olmadığını görmek. Temel olarak onu (sahte sütunlar) sahte hale getirmeniz veya bildiğim kadarıyla javascript kullanmanız gerekir.

kaynak

2012-02-16 23:35:18

Bu en çok oy alan Google ismidir. sadece "CSS3 onu çözecektir" demek istedim http://stackoverflow.com/a/16837667/1463507 – kqr

Geçmişte kullandığım ucuz bir çözüm, üst ve alt konumlarını sıfırlamak oldu.

.left-image{ 
    background: transparent url('image/url.png') repeat-y top left; 
    /*min-height: 100%;*/ 
    position: absolute; 
    top: 0px; 
    bottom: 0px; 
    min-width: 960px; 
    max-width: 1280px; 
    margin: 0 auto; 
} 
.right-image{ 
    background: transparent url('image/url.png') repeat-y top left; 
    /*height: 100%;*/ 
    position: absolute; 
    top: 0px; 
    bottom: 0px; 
}

kaynak

2012-01-22 22:51:48 Shredderroy

Teşekkürler! Bu, divun ekrana sığması açısından mükemmel bir şekilde çalışır, ancak belgede aşağı doğru kaydırırsam div içeriği genişletmez (kaydırdığım anda durur). Ben konum ile bir şey yapıp yapamayacağımı merak ediyorum: (belki de içeriği ayrı div olarak yapabilirim? Onunla oynayacağım ...) –

-1

kullanıyorum sona erdi:

$(".left-image, .right-image").height($(document).height());

(ı belge yük kullandı, pencere boyutlandırma durumunda ve ajax çağrıları sayfasını uzatabileceğini yapıldığında)

bence benim yeni kuralı tek başına css kullanarak anlamaya yirmi dakikadan fazla sürdüğünde basit bir şekilde gideceğim ve javascript/jquery kullanacağım olacak ...

kaynak

2012-01-23 11:42:48

Sorunuzdaki girişimleriniz CSS'yi iyi bilmediğinizi ve jQuery "tuzak, nasıl çalıştığını öğrenmek yerine pes etmeyi seçtiğiniz anlamına gelir. – Rob

beni doğru yöne yönlendirmek bilgimi eleştirmekten daha yararlı ... CSS hakkında hiçbir şey bilmiyorum ya da burada sormayacağım. –

Bu, yalnızca css'de çözülebilir. – Dementic

Muhtemelen daha iyi olursunuz Bir arkaplan resmi belirleme - bkz. örnek için http://jsfiddle.net/ZXpyT/. Bu, gövde içeriğinin 960 piksel geniş olacağını varsayar. fikir, mevcut ayrı sol/sağ görüntülerin yerini alan bir görüntü (dikey olarak tekrarlanabilir) oluşturmak olacaktır.

kaynak

2012-01-26 23:56:22 Conan

Arka planın ana div ile genişletilmesi ve daraltılması gerekiyor. Ana div, 960px'lik bir maksimum ve 1280px'lik bir maksimum genişliğe sahip ve herhangi bir genişlikte sınırlamak için arka plan görüntüsüne ihtiyacım var, bu yüzden iki ayrı görüntü olması gerekiyor. –

.wrapper{ 
background: url('left.jpg'),url('right.jpg'); 
background-repeat: repeat-y, repeat-y; 
height:100%; 
}

üzgün gibi, sarıcı div yerine 2 div öğelerine birden arka belirtebilirsiniz ben de burada bu goes..try ... desteklemek istediğiniz tarayıcı matrisi cevapsız tüm tarayıcılarda benim için çalıştı ..bu

<html> 
    <head> 
     <title></title> 
     <style type="text/css"> 
      .left-image{ 
       background:grey; 
       min-height:100%; 
       height:100%; 
       width:100%; 
       position:absolute; 
      } 
      .right-image{ 
       background:#eee; 
       min-height:100%; 
       height:100%; 
       width:50%; 
       margin:0 auto; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="left-image"> 
      <div class="right-image"> 
       main body text 
      </div> 
     </div> 
    </body> 
</html>

kaynak

2012-01-27 10:24:09 Abhidev

http://www.w3schools.com/css3/css3_backgrounds.asp çoklu arka planlar IE8 ve bellow'da çalışmaz. PIE çalışmayı başaramadım ve onunla savaşmaya ya da sadece JS kullanmaya değip değmediğinden emin değilim. –

Güzel deneme! :) Tarayıcı penceresinin yüksekliğinden daha fazla uzanan bir metin koyarsanız işe yaramıyor. Sana söylüyorum ... kolay görünüyor ama çok değil! –

başka bir yol olabilir ... pozisyon verme: soldaki resim div'ına sabit. Bunu denedin mi? – Abhidev

Neden .left-imageheight:100% vermiyorsun? Bazı tarayıcılarda% 100 tarayıcı genişliği/yüksekliği elde etmek için, her bir öğeyi% 100'e ayarlamanız gerekir.

kaynak

2012-02-09 22:17:03

height: inherit; nasıl? Üst etiketin yüksekliğini olduğu gibi almalı.

kaynak

2012-02-10 13:39:50 Giannis

bu, içerik en azından sayfanın yüksekliğindeyken çalışır, ancak en azından tarayıcı penceresi kadar yüksek olması gereken div'lara ihtiyacım vardı. Sanırım bu yükseklikte bir yer okumuştum: Dış elemanın bir otomatik değeri ve min-yüksekliği otomatik olarak kabul edildiğinde% 100 çalışmaz, bu muhtemelen devraldığı kadarıyla da geçerlidir –

Soldaki resimde min-height kullanıyorsunuz, neden sağ resimde de değilsiniz?

kaynak

2012-02-12 11:41:21 JuanOjeda

-1

Gerçekten kolay bir düzeltme var. Bunu css ekranınıza ekleyin: bock;

kaynak

2012-03-06 20:05:30

Div ve çocuk div'unu en azından tarayıcı penceresinin tam yüksekliğini uzatın

cevap

İlgili konular