HTML to podstawy w dziedzinie tworzenia stron WWW, Style CSS warto opanować, bowiem za ich pomocą można dostosować odpowiednio wygląd swojej witryny WWW. Zagłębiamy się dalej i udostępniamy w tym forum możliwość zadawania pytań o JavaScript.
Męczę się z tym tematem od kilku dni. W necie jest kilka rozwiązań ale żadne nie pasuje do mojego problemu albo wręcz jawnie go pomija.
Chodzi o utworzenie 3 poziomych ramek (jedna nad drugą) tak aby górna i dolna ramka miały stałą wysokość a środkowa automatycznie poszerzała się w pionie tak aby dopełnić obszar o nazwie "page"
niestety w div#center atrybut height: 100% powoduje poszerzenie diva poza "page" a height: auto nie robi nic.
ale to taka moja niechęć do używania pozycji absolutnych tam gdzie nie jest to wymagane.
natomiast co do problemu:
to wg mnie najlepiej by było użyć tutaj javaScript.
Mniej więcej tak by to wyglądało - (użyłem biblioteki jQuery dla ułatwienia)
zanim zacznie się rozwiązywać problem trzeba się zastanowić nad założeniami. Pierwsze powiedz jak i po co będzie się zmieniała wysokość diva #page.
No bo musi się zmieniać inaczej nie ma po co dynamicznie zmieniać wysokości diva #center. A tu masz wpisane w css na sztywno.
W takim przypadku wystarczy wpisać jako wysokość 334px. Jeśli natomiast środkowy div ma się rozszerzać by pomieścić swoją zawartość(różna na różnych podstronach) to po prostu nie podawaj wysokości, a div sam się dopasuje do swojej zawartości. Możesz mu nadać też min-height jeśli trzeba żeby layout się nie skurczył zanadto gdy jest mało zawartości.
Wreszcie jeśli pomiędzy nagłówkiem, a stopką ma być jakieś tło to przydziel je divowi #page do tego dając #top i #bottom jakieś inne tło.
Jeśli natomiast z jakiś powodów ma ci się wysokość #page zmieniać to użyj kodu jamart. Przy wczytaniu strony i za każdym razem jak będziesz zmieniał wysokość bez odświeżania strony.
Swoją drogą to przy tworzeniu layoutów stron bardzo rzadko ogranicza się wysokość. No chyba, że strona ma rozszerzać ci się w poziomie.
