Dociągnięcie tła do stopki

0

Witam,

Ja dociągnąć czerwone tło do końca, czyli do niebieskiej stopki?
Sytuacja może się odwrócić i czerwone tło może być dłuższe :)
user image

<div id="lewa"></div>
<div id="prawa"></div>
<div style="width: 100%; clear: both;"></div>
<div id="stopka"></div>
#lewa {
	float: left;
	width: 480px;
	height: auto;
	background: #ff0000;
}
#lewa {
	float: left;
	width: 440px;
	height: auto;
	background: #fff;
}
#stopka {
	width: 920px;
	height: 40px;
	background: #0000ff;
}
0

Za pomocą samego CSS to tylko przychodzi mi do głowy jedno rozwiązanie... wrzucenie tych dwóch elementów o id "prawy" i "lewy" do jednego elementu div, po czym wypełnienie tego elementu tłem obrazkowym powtarzanym w pionie... ale nie jest to zbyt "elastyczne" rozwiązanie :P

Można coś wykombinować używając jQuery np.

  • pobierając wysokość tych dwóch elementów
  • porównując obie wartości wysokości tych elementów w celu wybrania większej
  • ustawienie większej wartości dla obu elementów
<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>CSS</title>
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript">
$(function(){

  var $lewy_element = $('.lewa');
  var $prawy_element = $('.prawa');
  var wysokosc_lewa = $lewy_element.height();
  var wysokosc_prawa = $prawy_element.height();

    if (wysokosc_lewa > wysokosc_prawa)
	{
        $lewy_element.css('height', wysokosc_lewa);
        $prawy_element.css('height', wysokosc_lewa);
	}
	else
	{
        $lewy_element.css('height', wysokosc_prawa);
        $prawy_element.css('height', wysokosc_prawa);
	}

});
</script>

<style type="text/css">
.calosc {
        width: 920px;
	margin:0px auto;
}
.prawa {
        float: left;
        width: 480px;
	background: #f00;
}
.lewa {
        float: left;
        width: 440px;
	background: #eee;
}
.tresc_lewa {
        padding:0px 10px;
}
.tresc_prawa {
        padding:0px 10px;
}
.stopka {
        background: #000;
	clear:both;
	color:#FFF;
}
</style>

</head>

<body>

<div class="calosc">

  <div class="lewa">
    <p class="tresc_lewa">lewa<br/>lewa<br/>lewa<br/>lewa<br/>lewa<br/>lewa<br/>lewa<br/>lewa</p>
  </div>
  
  <div class="prawa">
    <p class="tresc_prawa">prawa</p>
  </div>
  
  <div class="stopka">stopka</div>
</div>

</body>
</html>

Końcowy rezultat:

roz1.png
0

Dzięki bardzo. Skorzystam z jQuery bo nie mogę użyć jednego tła - tak naprawdę moje tła obrazkowe są niezależne i nie mogą tworzyć całości.

0

@kun87:
@Patryk27:
@piternet:
Z podanym i zaakceptowanym jako rozwiązanie kodem jest niestety dużo więcej problemów niż tylko bezsensownie, myląco użyte znaki $.

Sugeruję autorowi rozważenie następujących kwestii:

  1. Tradycyjnie, jeśli już używamy w JavaScripcie jQuery, to owszem, niektórym zmiennym nadajemy nazwy rozpoczynające się od $, ale dotyczy to tylko zmiennych będących obiektami (kolekcjami) jQuery:

Czyli:

var $mojDiv = $("div#moj"); // OK -- kolekcja jQuery
var $mojLink = $mojDiv.find("a"); // OK -- kolekcja jQuery
var mojDiv - $mojDiv[0]; // OK -- element DOM, a nie kolekcja jQuery
var liczba = 4; // OK -- liczba, a nie kolekcja jQuery

var $liczba = 4; // ŹLE!!! to liczba, a nie kolekcja jQuery -- powinno być bez $
var $jakisLink = $mojLink[0]; // ŹLE!!! to element DOM, a nie kolekcja jQuery -- powinno być bez $

To jest słuszny argument za używaniem lub nie używaniem $. Nie chodzi aż tak bardzo o pisanie kolejnego znaku, a jeśli już to o szum, jaki ten znak powoduje przy CZYTANIU kodu, a nie czas, jakiego wymaga przy PISANIU kodu. Programiści zdecydowaną większość czasu spędzają na czytaniu i debugowaniu kodu, a nie pisaniu. Jeden znak w tę czy w tamtą podczas pisania ma marginalne znaczenie.

W rozwiązaniu znak dolara trafił wszędzie. Również do zmiennych skalarnych, tj. przechowujących liczby. Jest to mylące i błędne. Samego dolara nie dodajemy w JS-ie "bo można" czy "bo jest fajny". To, że można coś zrobić czy że NAM coś się wydaje fajne nie ma żadnego znaczenia. Profesjonalista nie tworzy kodu w ten sposób.

Kod ma być maksymalnie czytelny i zrozumiały. Wszystko inne, wszystkie dodatkowe szlaczki w zmiennych, to szum. Można np. poprzedzać wszystkie składowe prywatne klasy znakiem podkreślenia (_), bo ten znak może zwiększyć zrozumiałość kodu: oznacza, że używamy właśnie składowej (pseudo)klasy. W normalnych językach programowania nie trzeba używać tego znaku, bo IDE podświetla składowe na inny kolor. Dynamika JS-a (i bezklasowość) nie pozwala na łatwą implementację takiego podświetlania, więc możemy stosować podkreślniki. Albo dolary. Albo cokolwiek. Ale nie możemy dawać podkreślnika do każdej jednej zmiennej, "bo tak". To by była już nadmiarowość, głupota.

z kodu rozwiązania należy usunąć dolary z nazw zmiennych skalarnych.

  1. To być może wynika z powyższego, ale autor nagminnie używa niepotrzebnie funkcji $() na czymś, co jest już wynikiem działania funkcji $.

Mamy na przykład (oznaczmy to gwiazdką):

  $($lewy_element) // (*)

Podczas gdy $lewy_element zdefiniowaliśmy jako:

Po podstawieniu prawej strony równości w miejsce oznaczone (*), mamy jakby:

  $($('.lewa')) // (*)

Czyli zbędne, dwukrotne owinięcie w funkcję $(). Należy usunąć to drugie wywołanie $. Jest nadmiarowe i tylko spowalnia, zaśmieca i zaciemnia kod.

M.in. po to dodaje się tradycyjnie znaczek $ do zmiennych z kolekcjami jQuery, by drugi raz nie wywoływać na nich funkcji $(). Ponieważ autor jednak dodaje na wiwat ten znak dolara wszędzie gdzie się da, może nie zauważyć tego, co byłoby oczywiste gdyby trzymał się konwencji (którą, jak widać, całkiem sensownie wymyślono).

  1. Kod cierpni na zmorę powtórzeń, łamiąc zasadę DRY ( http://en.wikipedia.org/wiki/DRY ). Jest też mało uniwersalny: po dodaniu trzeciej czy czwartej kolumny trzeba by go mocno zmodyfikować, dodając kolejne IF-y i zmienne.

Można go przepisać tak:

$(document).ready(function() {
  var $kolumny = $(".lewa, .prawa");
  var wysokoscNajwyzszejKolumny = 0;
  $kolumny
    .each(function() {
      var wysokoscTejKolumny = $(this).height();
      if (wysokoscTejKolumny > wysokoscNajwyzszejKolumny) {
        wysokoscNajwyzszejKolumny = wysokoscTejKolumny;
      }
    })
    .css("height", wysokoscNajwyzszejKolumny);
  ;
});

To tak najprościej, łopatologicznie. Da się krócej:

$(document).ready(function() {
  var $kolumny = $(".lewa, .prawa");
  var wysokoscNajwyzszejKolumny = 0;
  $kolumny
    .each(function() {
      wysokoscNajwyzszejKolumny = Math.max($(this).height(), wysokoscNajwyzszejKolumny);
    })
    .css("height", wysokoscNajwyzszejKolumny);
  ;
});

Da się to oczywiście skrócić, np. korzystając z funkcyjności, ale wtedy z czytelnością już gorzej, nawet przy zachowaniu zmiennej pomocniczej wysokosci:

$(document).ready(function() {
  var $kolumny = $(".lewa, .prawa");
  var wysokosci = $.map($.makeArray($kolumny), function(kolumna) { return $(kolumna).height() });
  $kolumny.css("height", Math.max.apply(Math, wysokosci));
});

Tak czy siak, ten -- krótszy -- kod jest znacznie bardziej elastyczny. Żeby dodać kolejne kolumny, wystarczy zmienić selektor przy deklaracji zmiennej $kolumny. Trywialnie można by całość zamknąć w funkcji.

1 użytkowników online, w tym zalogowanych: 0, gości: 1