Arka plan resmi tarayıcı penceresi eksi üstbilgisi ve alt katın alt kısmının üstünü kaplaması

Başlık biraz kafa karıştırıcı olabilir, neyi başarmam gerektiğini açıklamak için elimden gelenin en iyisini yapacağım. Tüm içerik alan arka plan görüntüsü kapaklar - - Bu önemli bir parçası Arka plan resmi tarayıcı penceresi eksi üstbilgisi ve alt katın alt kısmının üstünü kaplaması

Alt olduğunu

İçerik içeriğinin yukarısında her zaman görünür -

Başlığı: Temelde Belirli bir web sayfasına aşağıdaki unsurları var altbilgi - içerik hakkında bilgi her zaman aşağıda görülebilir.

Altbilgi - standart bir alt başlık, pencere yüksekliği belli bir boyutta olduğunda görünür, aksi halde sayfayı görmek için aşağıya doğru kaydırmanız gerekir

Yukarıda bahsettiğim gibi, sayfanın içerik kısmı belki de en zor kısmıdır. Tüm alanı kapsayan arka planda olmak için büyük bir görüntüye ihtiyacım var. css-tricks'in bir excellent guide in the ways to do full page background images vardır. Bu yüzden bunun kolayca elde edilebileceğini umuyorum. Sorun, alt tabakanın altta kalmasını sağlamaktır; eğer pencere, alt kısmın altında alt kısmın altından < 720px ise (kaydırmanız gerekir). Pencere> 720px, hem alt altbilgiyi hem de altbilgiyi kaydırma çubuğu içermemelidir.

Hatta içerik (muhtemelen içerik <div> üzerinde kaydırma çubukları gerektiren veya alt Altbilgiyi alt yarısında altbilgi gitmek hem yapma) olması gerekir minimum yüksekliği hakkında bu noktada endişe olmaz. İşte
elde etmek çalışıyorum ne görüntü maket şunlardır:

İlk - bir pencere altbilgi ihtiyacı nerede boyunda kaydırılacak < 720px:

İkinci - bir pencere < 720px boyunda

Son olarak - her şey görünür olduğundan hiçbir kaydırma çubukları olan bir uzun boylu bir pencere> 720px: o altbilgi görmek için aşağı kaydırıldığını Query kullanıyorum ve IE6'yı umursamıyorum. Bunu CSS'de yapabilir miyim? Dinamik olarak ayarlamak için jQuery kullanmalı mıyım? Tam sayfa arka planları css3 ile kolayca yapılabilir, ihtiyacım olanı yapmak için css3 veya html5 kullanıyorum.

kaynak

2011-01-25 at.

Niçin sizin için içerik çalışmaları üzerinde min-height? – nemophrost

Alt footer her zaman altta olmayacağından ve altlık her zaman <720px ekranlar için ekranın altında olmayacak ve> 720px ekranlar için alt kısımda sabitlenecektir. –

Gerçekten problemi görmüyorum.Yüksek z-endeksine sahip mutlak konumlandırılmış bir başlığa sahip olursunuz. daha sonra normal bir içerik alanı ve son olarak bir altbilgi - bg görüntülerinin hepsinin aynı boyuta sahip olması durumunda - altbilginin altında yer alır. veya bg görüntülerinin ölçeklenmesini ister misiniz? bir seçenek @ medya sorguları ile gitmek olurdu ... – tobiasmay

CSS position: fixed kesinlikle kullanamazsınız, çünkü bu her zaman ana öğeye değil, görünümüne göre görüntülenir.

Yapmanız gereken şey, "içerik" in sabit konumlandırılmış alt öğesi olarak "alt başlık" a sahip olmasıdır. Bunu yapabilmek için Javascript kullanmanız gerekecek.

Böyle bir şey, ihtiyacınız olanı yapmalıdır. böylece çeşitli içerik yükseklikleri nasıl davrandığını görebilirsiniz #content için CSS'deki yüksekliği değişken değiştirmeyi deneyin:

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
<style> 
    #header { 
     height: 50px; 
     background-color: #ccc; 
     width: 100%; 
     margin-bottom: 10px; 
    } 

    #content { 
     position: relative; 
     height: 1500px; 
     width: 100%; 
     background-color: #ccc; 
    } 

    #subfooter { 
     height: 50px; 
     width: 100%; 
     background-color: #666; 
     position: fixed; 
    } 

    #footer { 
     height: 50px; 
     width: 100%; 
     margin-top: 10px; 
     background-color: #ccc; 
    } 
</style> 
<script> 
    $(document).ready(function(){ 

     $(document).scroll(function() { 
      position_subfooter(); 
     }); 

     var position_subfooter = function() { 
      $("#subfooter").css("bottom", "20px"); 
      if(($("#subfooter").offset().top - $("#subfooter").height()) > ($("#content").scrollTop() + $("#content").height())) { 
       $("#subfooter").css("bottom", ($("#subfooter").offset().top - ($("#content").scrollTop() + $("#content").height()) + 20)); 
      } 
     } 
     position_subfooter(); 
    }); 
</script> 
</head> 
<body> 
    <div id="header"> 
     <h1>HEADER</h1> 
    </div> 
    <div id="content"> 

    </div> 
    <div id="subfooter"> 
     <h2>SUB FOOTER</h1> 
    </div> 
    <div id="footer"> 
     <h1>FOOTER</h1> 
    </div> 
</body> 
</html>

kaynak

2011-01-25 18:46:11

Arka plan resmi tarayıcı penceresi eksi üstbilgisi ve alt katın alt kısmının üstünü kaplaması

cevap

İlgili konular