[CSS]Rozciąganie się diva według przeglądarki Opcje

[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ć)

(IMG:http://iv.pl/images/79973730077650162141.jpg)

Ten post edytował Woytek950 23.01.2012, 18:16:33

[qazwsx1]

[HTML] pobierz, plaintext 
#div1 {
position: absolute;
height: 300px;
width: 400px;
}
#div2 {
height: 100%;
width: 400px;
}
#trescdiv2 {
padding-top: 300px;
}
[HTML] pobierz, plaintext 

a html

[HTML] pobierz, plaintext 
<div id="div1">
   treść div1
</div>
<div id="div2">
   <div id="trescdiv2">
      treść div2
   </div>
</div>
[HTML] pobierz, plaintext 

Ten post edytował qazwsx1 23.01.2012, 20:28:25

[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

(IMG:http://iv.pl/images/50130527616297157119.jpg)

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

Nikt nie ma takich umiejętności?

Ten post edytował Woytek950 24.01.2012, 12:05:37

[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 (IMG:style_emoticons/default/wink.gif)

[lobopol]

Nie prościej

[HTML] pobierz, plaintext 
<style>
#jeden {height:300px;}
#dwa{min-height:100%}
</style>
<div id="dwa">
<div id="jeden"></div>
</div>
[HTML] pobierz, plaintext 

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...

Ten post edytował Woytek950 24.01.2012, 21:59:48

[by_ikar]

@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.

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 (IMG:style_emoticons/default/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)

Ten post edytował Woytek950 25.01.2012, 15:40:09

[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...

Ten post edytował Woytek950 25.01.2012, 15:55:09

[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

Ten post edytował Woytek950 25.01.2012, 16:05:20

[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;