Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Rozciąganie się diva według przeglądarki
Forum PHP.pl > Forum > Przedszkole
Woytek950
Witam. Jak osiągnąć taki efekt jak na przykładzie? DIV #1 ma wysokośc 300px; i szerokość 400px; DIV #2 ma wysokośc równą pustej przestrzenie od DIVA #1 do paska stanu przeglądarki.(wyłącznie. ze względu na pojawianie się scrolla. ma się nie pokazywać)
qazwsx1
  1. #div1 {
  2. position: absolute;
  3. height: 300px;
  4. width: 400px;
  5. }
  6. #div2 {
  7. height: 100%;
  8. width: 400px;
  9. }
  10. #trescdiv2 {
  11. padding-top: 300px;
  12. }

a html
  1. <div id="div1">
  2. treść div1
  3. </div>
  4. <div id="div2">
  5. <div id="trescdiv2">
  6. treść div2
  7. </div>
  8. </div>
by_ikar
@up a po co tutaj pozycjonowanie absolutne?

Wystarczy nadać temu div'owi min-height: 100% a jest to często wykorzystywane w przypadku "przyklejonej stopki" ( http://lmgtfy.com/?q=css+sticky+footer ).
Woytek950
Div #1 nie może być na tej samej wysokości co div#2 poniważ div #1 ma przezroczyste tło. Jeżeli by nie miał to sprawa załątwiona ale ma. Problem polega na tym że po ustawieniu dla body, wrapper i menuBg(div z powielajacym tlem do statusBar'a) height: 100%; wysokość ustawia się 100% wyokości przeglądarki + wysokość diva #1. Przez co pojawia się scroll



Nikt się nie znajdzie, kto by pomógł?

Nikt nie ma takich umiejętności?
by_ikar
Nikt nie ma umiejętności podglądu kodu którego nie podałeś. Podałem ci przykład, podałem ci link - olałeś..
Damonsson
Pokaż online co masz i zrób screeny co chcesz osiągnąć...większość nie interesuje się pismem obrazkowym wink.gif
lobopol
Nie prościej
  1. #jeden {height:300px;}
  2. #dwa{min-height:100%}
  3. <div id="dwa">
  4. <div id="jeden"></div>
  5. </div>


Jeżeli #jeden ma tło przezroczyste to w środku jeszcze jeden div z tym tłem, a #jeden wypozycjonowany obrazek tła tego co ma być pod nim.
Woytek950
@by_ikar, Twój kod nie rozwiązał problemu.

Już nie mam sił do tego. To jest chyba nierozwiązywalne.

Tu się nie ma nad czym zastanawiac i nie potrzeba więcej niż przedstawia obrazek. Ważne są dwie rzeczy:
- div z linkami ma miec stalo wysokość
- div pod linkami ma się powielać i mieć wysokość 100%
Tylko jak to skleić ?

PS. nie ma możliwości aby tło zawierając przezroczyste elementy, po ustawieniu linijki kodu: #divJakis{background: url(obrazekZprzezroczystymiElementami.png) green; } wyświetlało się poprawnie. Zawsze puste przestrzenie wypełnią się kolorem green...
by_ikar
Cytat(Woytek950 @ 24.01.2012, 21:56:56 ) *
@by_ikar, Twój kod nie rozwiązał problemu.

Już nie mam sił do tego. To jest chyba nierozwiązywalne.

Tu się nie ma nad czym zastanawiac i nie potrzeba więcej niż przedstawia obrazek. Ważne są dwie rzeczy:
- div z linkami ma miec stalo wysokość
- div pod linkami ma się powielać i mieć wysokość 100%
Tylko jak to skleić ?

PS. nie ma możliwości aby tło zawierając przezroczyste elementy, po ustawieniu linijki kodu: #divJakis{background: url(obrazekZprzezroczystymiElementami.png) green; } wyświetlało się poprawnie. Zawsze puste przestrzenie wypełnią się kolorem green...


To właśnie o czym piszesz, można uzyskać poprzez min-height ustawione na 100% o których ci pisałem.

Cytat
Twój kod nie rozwiązał problemu.


A możesz jakieś objawy tego podać, dlaczego nie rozwiązuje twojego problemu? Podaj cały kod, bo póki co nie wiemy jak ostylowałeś swój layout, jaką masz strukturę etc. Link który ci podałem, ma nawet demo, na którym to właśnie działa i jeżeli tam działa, u ciebie też powinno. Tyle że pewnie coś źle zrobiłeś. Ale skąd mamy to wiedzieć, jeżeli nie podałeś nawet skrawka kodu?

BTW w html + css + js można osiągnąć rzeczy, które się nawet filozofom nie śniły wink.gif
Woytek950
http://testa.ugu.pl/index.html kod spreparowany przez kolegę wyżej.Nie działa bo nie rozciąga się do dolnego krańca przeglądarki.
http://testa.ugu.pl/index2.html kod poprawiony przezemnie. Tu jest wszystko ok prócz tła które wypełnia luki w obrazie png przez co ma kolor niebieski. (ulatwilem rozroznianie, bo gdybym ustawil szary(bo taki ma być) to by się zlało i był by prostokąt)
Damonsson
To nie możesz dać
background-color: #fff;
?
Woytek950
A tutaj wersja nr 3 http://testa.ugu.pl/index3.html
Wszystko było by ok gdyby nie to że dla drugiego diva wysokość zwiększa się o wysokość pierwszego czyli: 100%(wysokosc okna) + 768px;( wys. pierwszego diva).

Naprawde nie rozumiecie o co mi chodzi? jezeli ostatni przykład nie zrozumiecie to chyba zrezygnuje z html i css... zostane ninja
Cała ta męczarnia dlatego ze tło dla body to widok chmur, czyli nie jednolite tlo...
Damonsson
No i teraz w 3 przykładzie, dodaj do #main, overflow: hidden... w czym problem?
Woytek950
@Damonsson, tego właśnie brakowało. Nigdy bym na to nie wpadł. Dziękuje.
PS. tym którzy starali się mi pomóc dałem "pomógł", wiem że to nie order zwycięstwa ale tylko tak mogłem się odwdzięczyć w prosty sposób.

Przy okazji. mam jeszcze jedno pytanko. Jak ułożyć divy żeby Za divem 2(ten nieszczęsny div z przezroczystym tłem) nie było białej luki tylko div który wypełniał by ją wzdłuż i szerz ?
http://testa.ugu.pl/index4.html
by_ikar
Całemu kontenerowi nadajesz kolor tła czerwony. Wówczas kolor kontenera w którym jest cała strona, będzie miał taki sam kolor jak któraś kolumna. W efekcie czego będzie wyglądało to jakby się rozciągało. Czyli w twoim przypadku #main dodajesz bacground: red;
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.