Dopasowanie dolnej części DIVa do tła

[Rivski]

Hej,

mam problem z dopasowaniem dolnej części DIVa do tła.
Mianowicie - na stronie w tle mam wstawioną kratkę
na to nałożona jest cała strona, gdzie każdy element jest dopasowany
do konturów kratki (np. przyciski zajmują pole 2x5 kratek itd.)

Całą górę strony udało mi się ładnie dopasować, problem robi się ze stopką. W zależności od ilości tekstu na stronie div ma różne wymiary - nie mogę mu na sztywno ustawić takiej wysokości, żeby się dopasował do kratek.


(tutaj przykład jak mi się to rozjeżdża - koniec DIVa, nie dopasowuje się do tła)

Czy ktoś ma jakiś pomysł jak to dopasować?

[Kartofelek]

Poprzez CSS się nie da.
Poprzez JS - cieplej.

Można by np pobrać wysokość diva (przykład w jQuery):

var height = $("#ten_div').outerHeight();
potem np sprawdzić różnicę
height % 30

i wyliczyć nową jeżeli była by różna od 0. Taki tylko pomysł.

[bartosz-nowicki]

Może w takim razie sticky footer pomoże?
Footer zawsze będzie na dole strony, bez znaczenia ile tekstu będzie zawierała.

http://ryanfait.com/sticky-footer/

[Rivski]

@bartosz-nowicki: Sticky footer raczej odpada. Z tego co zrozumiałem, to stopka znajduje się zawsze na tej samej wysokości od dołu - natomiast tutaj nie zawsze na dole tło kończy mi się w tym samym miejscu, więc nie da się na sztywno dopasować (tło może skończyć się np. w połowie kratki - i teraz całe dopasowanie siada). Ale tak swoją drogą dzięki za linka, na pewno się przyda na przyszłość, gdybym coś podobnego robił.

@Kartofelek: Właśnie zakładałem, że pewnie JS byłoby tutaj rozwiązaniem. Zastanawiam się tylko jak to napisać (jeśli chodzi o JS to jestem kompletnie zielony). Jeśli się nie mylę, to wysokość diva musi być wielokrotnością 26 - 1 (wymiary kratki to 25px + 2px na ramkę z góry i z dołu - na samej górze strony pierwsza kratka nie ma górnej ramki - czyli 25 + 1 ramki, powtórzyć X razy, a na końcu odjąć 1, żeby pozbyć się dolnej ramki - bo div ma w CSSie wrzuconą ramkę, która powinna pokryć się z tą z kratki).

Czy ktoś pomógłby z przeniesieniem tego na JS?

[Kartofelek]

Kod:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
var kratka = 26;

var height = $("#ten_div').outerHeight();
if (height % kratka !== 0) $("#ten_div').height( Math.ceil(height / kratka) * kratka )

});
</script>

Oczywiście "jakis_div" to id do twojego diva.

Może te 26 nie będzie 100% celne - najwyżej pozmeniaj. Ale nie wiem czy to 100% jest dobry przepis. Nie chce mi się dzisiaj myśleć.

[Rivski]

Dzięki wielkie za pomoc. Udało mi się to przystosować, natomiast jest jeden mały problem.
Wszędzie działa ok, natomiast Opera odmawia posłuszeństwa i nie chce tego ładnie dopasować. :< Czy ktoś wie co może być nie tak?

Kod:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
var kratka = 26;

var szer = $("#content").outerHeight();
if (szer % kratka !== 0) $("#content").height(Math.ceil(szer/kratka)*kratka + 17);

});


</script>

[Kartofelek]

Wystaw na net, daj linka, zobaczy się.