Forum PHP.pl > div na całej długości okna

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: div na całej długości okna

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

daniel333

22.04.2013, 21:02:40

Cześć wszystkim,
mam taki problem, chciałbym, żeby div był zawsze "dociągnięty" do dolnej krawędzi ekranu niezależnie od wysokości strony tak jak na załączonym obrazku:

Próbowałem już coś kombinować z height:100% i funkcją height() jquery, ale powoli kończą mi się pomysły. Jeśli wiecie jak to zrobić, najlepiej w samym cssie to będę wdzięczny za pomoc. struktura dokumentu wygląda tak:

<body>
<container>
<blok1></blok1>
<content>
<blok2></blok2>
<reszta></reszta>
</content>
</container>
</body>

Pozdrawiam

Szymciosek

22.04.2013, 21:25:10

Może takie coś: http://webroad.pl/html5-css3/385-element-d...wysokosc-strony ?

daniel333

22.04.2013, 22:20:20

Po zastosowaniu tego rozwiązania content wydłuża mi się do długości okna przeglądarki, zostawiając pod stopką puste miejsce.

Szymciosek

22.04.2013, 22:25:35

W Jquery ogarnąłbym to w ten sposób, że wysokość footer ustawiasz na:
Wysokość okna minu wysokość innych elementów, w Twoich przypadku na załączonym obrazku powiedzmy niech będzie 500px - 100px

daniel333

23.04.2013, 10:39:56

Dlaczego

alert($('body').height());
alert($(window).height());

zwraca mi taką samą wartość?

Szymciosek

23.04.2013, 10:41:27

Może body masz rozciągnięte na 100%?

daniel333

23.04.2013, 11:04:24

a jak zwrócić łączną wysokość elementów strony? (blok1 + content)

alert($('#content').height()); // zwraca wysokość 0, jeśli nie ma ustawionej w cssie właściwości height:
alert($('body').height()); // zwraca zsumowaną wysokość elementówk które mają ustawioną właściwość height:
alert($('html').height()); // zwraca różne wyniki w różnych przeglądarkach ;o (w firefoxie jest to szukany wynik)

!*!

23.04.2013, 11:15:44

Musisz mieć coś źle. Pokaż kod, najlepiej online http://forum.php.pl/index.php?showtopic=15...mp;#entry896036

edycja:

http://jsfiddle.net/cEv54/

daniel333

23.04.2013, 11:20:02

Mój przykład: http://jsfiddle.net/SSy4Y/3/

!*!

23.04.2013, 11:24:47

Jak używasz float, to główny kontener ma 0px ponieważ nie obejmuje całości. Naprawia to:

[CSS] pobierz, plaintext 
#content{overflow:auto}
[CSS] pobierz, plaintext

daniel333

23.04.2013, 12:10:48

Dzięki jeszcze taka sytuacja wynikła, że chrome liczy tą długość contentu zanim załadują się w nim obrazki <img>, mimo że dałem $(document).ready. Na firefoxie i IE działa dobrze.

$('document').ready(function(){
var content = $('#content').height();
alert($('#content').height());
alert($(window).height());
$('#menu').height(content);
});

Szymciosek

23.04.2013, 12:12:25

Kod

$(window).load(function() {

niżej Twój kod -> policzy dopiero po załadowaniu wszystkiego.

daniel333

25.04.2013, 00:50:57

Wszystko działa jak należy, dzięki za pomoc

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.