Forum PHP.pl > Div w div'ie 'przyklejony' na dole

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Div w div'ie 'przyklejony' na dole

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

zietek

29.01.2008, 17:48:59

Witam, probuje osadzic diva wewnetrznego w divie zewnetrzym tak aby ich dolne krawedzie zawsze sie pokrywaly. Chodzi o to ze przy zmianie wysokosci diva zewnetrznego zawsze widzimy dol diva wewnetrzengo.
Aby to latwiej sobie wyobrazic zrobilem przyklad z backgroundem. Efekt taki sam jak chce osiagnac, ale z wewnetrzna trescia...
Da sie to jakos osiagnac ?

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
 <head>
  <title></title>
 </head>
 <body>
 
  <div id="d1" style="position:relative;overflow:hidden;width:300px;height:150px;background-color:#AAAAAA"><div style="position:relative">a<br/>b<br/>a<br/>b<br/>a<br/>b<br/>a<br/>b<br/>a<br/>b<br/>a<br/>b<br/></div></div>
 
<div style="margin:10px 10px 50px 10px">
 <input type="button" value="up" onclick="document.getElementById('d1').style.height='100px'">
 <input type="button" value="down" onclick="document.getElementById('d1').style.height='150px'">
</div>
 
<!-- taki efekt wizualny jak ponizej chce osiagnac --->
 
  <div id="d2" style="width:300px;height:150px;background-image:url(http://dwiestronyksiezyca.blox.pl/resource...ound-position:0 bottom"></div>
 
<div style="margin:10px 10px 50px 10px">
 <input type="button" value="up" onclick="document.getElementById('d2').style.height='100px'">
 <input type="button" value="down" onclick="document.getElementById('d2').style.height='150px'">
</div>
 
 </body>
</html>
[HTML] pobierz, plaintext

Toadstyle

29.01.2008, 20:11:51

troche to nieczytelne
probowales bottom:0;margin-bottom:0; ?lub to samo z -1?

arecki

29.01.2008, 20:22:56

Ostatnio ktoś miał problem ze scrollowaniem DIVa do czata. Żeby cały czas mu pokazywało się to co ostatnio było napisane. Akurat pamiętam bo tam zamieściłem rozwiązanie. Jak dobrze poszukasz i pogłówkujesz to znajdziesz. Generalnie trzeba tego DIVa "ręcznie" przewinąć w dół.

zietek

29.01.2008, 22:53:35

probowalem bottom:0;margin-bottom:0; na div'ie wewnetrzym - nie daje rezultatu.
Z recznym przewijamiem w dol.... wolalbym wymusic jakos za pomoca css, a sterowac jedynie wysokoscia div'a nadrzednego.

Docelowo chcialbym osiagnac efekt jak menu po lewej na stronie http://docs.mootools.net/
Zatem przy plynnym rozciaganiu komorki nadrzednej nie jest za wygodnie sterowac scrollem podrzednej, chociaz w ostattecznosci bede do tego zmuszony.

Jezeli jednak ktos by znal jakies prostrze rozwiazanie to prosze o pomoc.

arecki

30.01.2008, 18:42:35

Cytat(zietek @ 29.01.2008, 22:53:35 )

Docelowo chcialbym osiagnac efekt jak menu po lewej na stronie http://docs.mootools.net/

Masz nawet URL w którym pokazane jest jak to zrobić i się pytasz jak

Ja nic z tego nie kapuje

. Prosto się niestety nie da. Musisz odrobinę więcej niż sam CSS użyć (oczywiście mogę się mylić, gdyż nigdy w szkole nie byłem prymasem

)

zietek

30.01.2008, 19:55:38

ok, udalo sie:

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html> 
 <head> 
  <title></title> 
 </head> 
 <body> 
 
  <div style="overflow:hidden;width:300px;border:1px solid #444444"><div id="d1" style="margin-top:-100px">a<br/>b<br/>c<br/>d<br/>e<br/>f<br/>g<br/>h<br/>i<br/>j<br/>k<br/>l<br/></div></div>
 
  <div style="margin:10px 10px 50px 10px"> 
   <input type="button" value="up" onclick="document.getElementById('d1').style.marginTop='-150px'"> 
   <input type="button" value="down" onclick="document.getElementById('d1').style.marginTop='-100px'">
  </div> 
 
 </body> 
</html>
[HTML] pobierz, plaintext

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.