Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: rozszeżenie diva w dół
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
kari
29.11.2006, 14:14:40
Mam taki kod:

[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2. #box_pod_menu { position: absolute;
  3.                 top:      355px;
  4.                 left:     205px;
  5.                 width:    124px;
  6.                 height:   100px;
  7.                 background-image: url(../grafika_strony/box_pod_menu.png);
  8.                 background-repeat: repeat-y;
  9.                 z-index:  4; }
  10. </style>
  11.  
  12. <div id="box_pod_menu">
  13. </div>
[HTML] pobierz, plaintext


Box jest zawieszony w pewnej stałej odległości od górnej krawędzi okna, ale nie potrafię go zmusić, aby rozszerzał się w dół, do samego końca okna, nie zależnie jaka jest ustawiona rozdzielczość??
Zajec
29.11.2006, 15:41:32
bottom: 0?
kari
29.11.2006, 17:06:43
bottom: 0; niestety nie działa sad.gif
Cysiaczek
29.11.2006, 17:11:52
Możesz spróbować
Kod
height: 100%;
Zajec
30.11.2006, 15:08:26
A mi działa.

Pokaż swój test-case dla niedziałającego bottom.
-SaraniS-
19.12.2006, 10:19:48
Witam
Niestety, mnie również, mimo wielu kombinacji, nie udało się (tylko pod IE) uzyskać efektu. W innych przeglądarkach to działa prawidłowo, jednak IE nic sobie z tego ustawienia nie robi... Jakiś hack? aaevil.gif
E -dd
19.12.2006, 11:31:41
Może
Kod
height: 100pc;
margin-bottom: 0;
envp
19.12.2006, 12:19:18
Kurde, przeciez to jest znany odwieczny problem, wiążący się min. z footerem na divach. Oj Św. Mikołaj chyba przyniesie wygrawerowany adres google'a smile.gif
gekon
19.12.2006, 13:18:49
Wysokość zdeklarowana na 100% rozszerza element do maksymalnej wysokości rodzica. W XHTMLu (wysyłanym jako aplikacja xmla - czyli tylko w Przeglądarkach) jest to html->body->div, więc jeżeli html i body nie będą miały wysokości okna (dla html "rodzicem" jest okno przeglądarki), to element potomny nie będzie miał wysokości okna. W X/HTMLu wysyłanym jako text/html też nie zaszkodzi ustawić wysokości dla html i body. Tyle teoria, w praktyce nie sprawdzałem.
-SaraniS-
20.12.2006, 01:59:55
Tylko, ze u mnie div z trescia ma dynamiczna wysokosc, wiec co za tym idzie, cala rodzina w strone body tez musi miec dynamiczna wysokosc sad.gif
Poza tym, czytalem gdzies, ze akurat co do procentowej wysokosci, to jest to namieszane, i do jej obliczenia brana jest szerokosc rodzica, a nie wysokosc blink.gif
A co do footera, nawet w stronie o dynamicznej wysokosci, to poradzilem sobie bardzo prosto biggrin.gif Otoz wystarczy jego rodzicowi (dynamicznemu) ustawic position relative oraz padding-bottom na wysokosc footera, a sam footer dac position: absolute i bottom: 0 cool.gif
gekon
20.12.2006, 02:06:50
To nie wiem w końcu czy chcesz żeby ten div był na całą wysokość strony, czy miał dynamiczną.
-SaraniS-
20.12.2006, 08:44:15
Całą wysokość swojego rodzica, ale ten rodzic ma wysokość dynamiczną!
Po prostu - jest div z treścią - której może być dowolna ilość (w tym konkretnym przypadku jest to jedno "duże" zdjęcie, o stałej szerokości, ale różnej wysokości, oraz jakiś tekst pod nim), a z boku ma być pasek z miniaturami innych zdjęć dla tego artykułu - i ten pasek ma zajmować całą wysokość swego rodzica, niezależnie, jak ten rodzic jest rozciągnięty! Oczywiście pasek ma overflow: auto lub overflow: scroll, jeszcze nie wiem, co będzie lepsze w tym wypadku.
position: absolute; top: 0; bottom: 0; sprawdza się dla Opery i FF (w FF co innego się sypie ale nad tym pracuję), natomiast IE wymiaruje pasek wg ilości zawartych w nim miniatur (jak dla overflow: visible) i wywala je wszystkie na ekran dry.gif
Jakby co, podaje linka do tego co kombinuje: http://saranis.interka.pl/akimo_new/main.php?d=2

[EDIT]
Okazuje się, że wystarczyło wstawić rodzicom 2 poziomy w górę height: 100% i w IE już to działa tak, jak chciałem, i jak w innych przeglądarkach smile.gif
Problem solved
[/EDIT]
garguss
20.12.2006, 17:05:42
Przeczytałem uważnie wszystkie posty z tego tematu i o ile dobrze wszystko zrozumiałem,
to taki kod powinien zadziałać w oczekiwany przeze mnie sposób, tz.

DIV z zielonym tłem powinien się rozciągnąć, aż do końca niebieskiej warstwy, jednak tego nie robi... sad.gif

----------------------------------------------------------------------
EDIT

Oczywiście chodzi mi o wysokość tej warstwy a nie szerokość...

END
----------------------------------------------------------------------
Sprawdzałem zarówno pod FF jak i IE 

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3. <head>
  4. </head>
  5. <body>
  6. <div id="all" style="width:800px; height: 100%; background-color: #FF0000; margin: 0px;">
  7.     <div id="lewa" style="float: left; width: 197px; height: 100%; background-color: #00FF00; top: 0px; bottom: 0px; overflow: auto;">
  8.     <br />
  9.     </div>
  10.     <div id="srodek" style=" width: 600px; height: 100%; background-color: #0000FF;">
  11.         <br />
  12.         <br />
  13.         <br />
  14.         <br />
  15.     </div>
  16. </div>
  17. </body>
  18. </html>
[HTML] pobierz, plaintext



moje pytanie brzmi dlaczego ?

P.S.
Proszę o wyrozumiałość ponieważ dopiero zaczynam swoją przygodę z CSS-em
-SaraniS-
21.12.2006, 12:41:03
garguss
Z moich potyczek wiem, że element, który chcesz rozciągnąć, nie może pływać, musi być spozycjonowany absolutnie (czy pozycjonowanie relatywne zadziała - nie wiem). Zresztą w przypadku przedstawionego laya nie jest trudna jego przeróbka na absolut winksmiley.jpg
[HTML] pobierz, plaintext 
  1. <div style="position: relative; margin: 0 auto; width: 100%; height: 100%;">
  2. <div style="position: absolute; top: 0; left: 0; bottom: 0; width: 25%; height: 100%;">
  3. I ten div bedzie wlasnie rozciagniety :)
  4. </div>
  5. <div style="float: right; width: 74%;">
  6. Lewy div powinien rozciagac sie wg wysokosci tego diva
  7. </div>
  8. </div>
[HTML] pobierz, plaintext

O ile nie strzeliłem gdzieś byka - pisałem z głowy, mniej więcej takie układy sam stosuję smile.gif Poprzez łączenie pozycjonowania absolutnego oraz pływania (ale nie w jednym divie!), można rozwiązać problem stopki winksmiley.jpg
Pozdrawiam
garguss
23.12.2006, 07:00:17
Dzięki wielkie za pomoc, tak jak już wcześniej napisałem dopiero zaczynam swoją przygodę z CSS i bardzo się cieszę, że są ludzie,
którzy odpowiadają nawet na takie pytania jak to moje.

Jeszcze raz dziękuje -SaraniS- smile.gif
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.