Obraz tła obejmujący okno przeglądarki minus nagłówek i stopkę poniżej złożenia

Tytuł może być trochę zagmatwany, postaram się jak najlepiej wyjaśnić, co muszę osiągnąć. Zasadniczo mam następujące elementy do określonej strony internetowej:Obraz tła obejmujący okno przeglądarki minus nagłówek i stopkę poniżej złożenia

nagłówka - zawsze widoczny powyżej zawartości
Treść - obraz w tle obejmuje cały obszar treści - ten jest kluczowym elementem
Pod- stopka - informacja o zawartości zawsze widoczna pod nim
Stopka - standardowa stopka firmowa, widoczna, jeśli wysokość okna ma określony rozmiar, w przeciwnym razie trzeba przewinąć w dół, aby go zobaczyć

Jak już wspomniałem powyżej, część zawartości strony może być najtrudniejszą częścią. Potrzebuję dużego obrazu, aby znaleźć się w tle, który obejmuje cały obszar. css-tricks ma numer excellent guide in the ways to do full page background images. Mam więc nadzieję, że można to łatwo osiągnąć. Problem polega na tym, jak sprawić, by stopka znajdowała się na dole, jeśli okno ma wartość < 720px ze stopką znajdującą się pod spodem (wymagającym przewinięcia do niej). Okno> 720px powinno pokazywać zarówno stopkę, jak i stopkę bez pasków przewijania.

nawet nie będę się martwić w tym momencie o minimalnej wysokości treść musi być (ewentualnie konieczność przewijania na zawartość <div> lub dokonywania zarówno sub-footer i stopki zejść poniżej krotnie).

Oto makiety obraz tego, co usiłuję osiągnąć:

pierwsze - okno < 720px wysoki gdzie potrzebuje stopka być przewijane do: <720px tall window where the footer needs to be scrolled to

drugie - okno < 720px wysoki który został przewinięty w dół, aby zobaczyć stopkę: enter image description here

Finally - wysoki okno> 720px, który nie ma pasków przewijania, ponieważ wszystko jest widoczne: enter image description here

Używam jQuery i nie dbam o IE6. Czy mogę to osiągnąć w CSS? Czy muszę używać jQuery do dynamicznego dostosowywania rzeczy? Pełne strony są łatwe do zrobienia dzięki css3, cieszę się, że mogę użyć css3 lub html5, aby zrobić to, czego potrzebuję.

Źródło

2011-01-25 at.

Dlaczego nie A min-height na pracy partnerskiej dla Ciebie? – nemophrost

Ponieważ podpasień nie zawsze znajduje się u dołu, a stopka nie zawsze będzie znajdowała się pod fałdą ekranu <720 pikseli, a na dole ekranu ekrany o wielkości 720 pikseli. –

Naprawdę nie widzę problemu ..masz absolutnie umieszczony nagłówek z wysokim indeksem Z. następnie normalny obszar zawartości, a na końcu stopka, w której wszystkie obrazy bg mają ten sam rozmiar, będą znajdować się pod stopką. czy chcesz, żeby obrazy w skali bg również skalowały się? Jedną z opcji będzie: @ media-queries ... – tobiasmay

Z pewnością nie można używać CSS position: fixed, ponieważ jest to zawsze względne względem rzutni, a nie elementu nadrzędnego.

To, co musisz zrobić, to "subfooter" jako ustalony element podrzędny "treści". Aby to zrobić, będziesz musiał użyć Javascript.

Coś takiego powinno zrobić to, czego potrzebujesz. Spróbuj zmienić zmienną wysokość w CSS dla #content więc można zobaczyć jak się zachowuje w różnych wysokościach treści:

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

Źródło

2011-01-25 18:46:11

Obraz tła obejmujący okno przeglądarki minus nagłówek i stopkę poniżej złożenia

Odpowiedz

Powiązane problemy