Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [XHTML]Automatyczne rozciąganie diva.
Forum PHP.pl > Forum > Przedszkole
DonJeday
Witam,

Mam główny div w którym jest kolejny div. I teraz chccę żeby wysokośc głównego diva wzrastała wraz z wysokością diva który jest w nim, jak to zrobić? Jak usune z niego height to robi się bardzo krótki i div w nim wystaje za niego.
Maxik
height: 100% na diva nadrzędnego, możesz tez nadać min-height: 500px;
DonJeday
Dalej wewnętrzny div wychodzi za główny i przy 100% dalej jest króciutki.

  1. div#glowny {
  2. background-color: #FFFFFF;
  3. border: 1px solid #BABCC2;
  4. width: 680px;
  5. height: 100%;
  6. margin: auto;
  7. padding: 20px;
  8. }
Chrom
może skorzystaj z overflow, hidden ukryje nadmiar a visible pokaże całość
hiszpanespaniol
dla internet explorer'a (przepraszam za wyrażenie) "height" oznacza tak naprawdę minimalną wysokość. Natomiast dla przeglądarek internetowych oznacza po prostu wysokość smile.gif. Więc jeżeli chcesz, aby Ci się skalowała wysokość pod wszystkimi przeglądarkami, to musisz zrobić taki myk:

  1. div#glowny {
  2. height: auto !important;
  3. height: 20px;
  4. min-height: 20px;
  5. }


Pierwsza linijka każe np Firefox'owi ustawić automatyczną wysokość i jednocześnie zignorować drugą linijkę.
Druga linijka ustawia wysokość (czyli minimalną wysokość dla ie) na 20px.
Trzecia (niezrozumiała dla ie6) ustawia minimalną wysokość dla tych przeglądarek, które znają coś takiego jak min-height.
Czyli Fx, Opera i ie7 odczytaja 1szą i 3cią linijkę, ie6 odczyta tylko drugą. W ten sposób otrzymasz minimalna wysokość pod wszystkimi przeglądarkami. Nie potrzeba tu overflow'ów jeśli div'y wewnątrz głównego nie będą float'owane.

Jeżeli chcesz inną minimalną wysokość, to pamiętaj o jej zmianie w obydwóch linijkach.
I taka kolejność definiowana jak napisałem jest niezbędna żeby działało.

pozdrawiam
Cysiaczek
Dalej nie rozwiązaliście problemu skalowania smile.gif
  1. function allocateSidebarHeight()
  2. {
  3. var contentDom = document.getElementById("rightcolumn");
  4. var sidebarDom = document.getElementById("leftcolumn");
  5.  
  6. if(contentDom.offsetHeight > sidebarDom.offsetHeight)
  7. {
  8. sidebarDom.style.height = (contentDom.offsetHeight)+"px";
  9. }
  10. else if(sidebarDom.offsetHeight > contentDom.offsetHeight)
  11. {
  12. contentDom.style.height = (sidebarDom.offsetHeight)+"px";
  13. }
  14. }
  15.  
  16. window.onload=allocateSidebarHeight;


Do dla divów umieszczonych obok siebie , ale doskonale zadziała przy skalowaniu diva wewnątrz diva. Znacie inny sposób?

Pozdrawiam.
hiszpanespaniol
nikt mi nie wmówi, że js jest potrzebny do tak banalnego problemu jakim jest skalowanie diva w pionie.
Cysiaczek
Ok, to ustaw mi dwa divy obok siebie w taki sposób, aby oba miały tą samą wysokość niezależnie od ilości treści w dowolnym z nich. Naprawdę nie kpię, tylko zupełnie poważnie mówię - ja nie umiem.

Pozdrawiam.

p.s Oczywiście wysokość ma być auto smile.gif
hiszpanespaniol
to, o czym ty piszesz, mija się z tematem tego postu. problemem jest jak rozciągnąć div'a w ten sposób aby div w środku (nie obok) się zawsze mieścił.

co do dwóch div'ów obok siebie to też nie masz racji. sposób jest taki jak napisałem w poprzednim poście, ale wewnętrzne div'y mają wysokość auto (może z jakimiś hack'ami dla ie typu height: auto; height: 100%). div'a kontener można zastąpić body. generalnie nie jest aż tak źle, żeby css sobie nie poradził z tym. jak w wolnej chwili to napiszę, to edytuję post
mkdes
A sprawa jest banalnie prosta.
Najlepiej ustaw styl dla wszystkich divów od razu.
Wtedy zawartość rozciąga diva.
div { overflow: hidden; }
Maxik
Cysiaczek: osobiście coś takiego zrobiłem, myk to faux column i w praktyce wygląda tak: http://maxik.netmark.pl/pyton/div/ kliknij na "Kontakt" i obserwuj smile.gif
hiszpanespaniol
Cysiaczek miał na myśli dwa div'y obok siebie, a nie żadne triki z tłem czy coś w tym stylu. Faux columns to po prostu iluzja takich div'ów o równej wysokości. Poza tym dodałem 30 linijek treści w Twoim kodzie (kiedy juz doszedłem który div ma ją zawierać) i nie zauważyłem żeby kolumna menu się rozciągnęła. Czyli taki layout jaki pokazałeś w linku można zrobic z ....... 6 elementów bez zagnieżdzania (bez divów w divach, właściwie tylko z 1 divem w ogóle) i efekt ten sam.

Przecież równie dobrze można dać jako stronę www zwykły jpg z mapami linków i powiedzieć, że się strona nie rozlatuje. Jeśli już robić triki z tłem, to lepiej lewy div floatować, a prawemu dać margines o szerokości lewego diva. i kropka. dwa div'y.

Generalnie problem z tematu jest rozwiązany, problem z dwoma div'ami obok siebie i o równej wysokości chyba rzeczywiście wymaga js.
DonJeday
Problem rozwiązany wystarczyło na początku css dać:
div {
overflow: hidden;
}


A w głównym divie:
height: auto;
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.