Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Wysokość dla div'a, jak ją ustawić?
mike
post
Post #1





Grupa: Przyjaciele php.pl
Postów: 7 494
Pomógł: 302
Dołączył: 31.03.2004

Ostrzeżenie: (0%)
-----

Mam taką sytuację:

3 elementy div o następującym wyglądzie:
Kod
+------------------------------------------------+
|+-------------++-------------------------------+|
||             ||                               ||
||             ||                               ||
||             ||                               ||
||             ||                               ||
||      B      ||                               ||
||             ||                               ||
||             ||                C              ||
||             ||                               ||
|+-------------+|                               ||
|               |                               ||
|               |                               ||
|               |                               ||
|     A         |                               ||
|               +-------------------------------+|
|                                                |
|                                                |
|                                                |
+------------------------------------------------+


I teraz pytanie:

Jak zrobić aby element B lub chociażby C miał maxymalną wysokość na jaką pozwala A?
Element A równie dobrze może być elementem BODY.

Mówimy o XHTML'u i style="height: 100%" nie wchodzi w gre bo nie działa.

Ten post edytował mike_mech 21.07.2005, 16:46:05
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 14)
wassago
post
Post #2





Grupa: Przyjaciele php.pl
Postów: 701
Pomógł: 0
Dołączył: 26.06.2002
Skąd: Londyn

Ostrzeżenie: (0%)
-----

mi działa.
[HTML] pobierz, plaintext 
  1. <div style="border: solid 1px red; height: 500px; width: 500px">
  2.   <div style="border: solid 1px blue; height: 200px; width: 100px; float: left"></div>
  3.   <div style="border: solid 1px green; height: 100%; width: 300px; float: right"></div>
  4. </div>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
mike
post
Post #3





Grupa: Przyjaciele php.pl
Postów: 7 494
Pomógł: 302
Dołączył: 31.03.2004

Ostrzeżenie: (0%)
-----

Cytat
Dwie rzeczy są nieskończone: Wszechświat i ludzka głupota; z czego co do Wszechświata nie jestem pewien.

Albert Einstein

Nie mam pojęcia co robiłem źle :/

Dzieki za uświadomienie mnie o mojej ułomności (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif)
Go to the top of the page
+Quote Post
Dravo
post
Post #4





Grupa: Zarejestrowani
Postów: 207
Pomógł: 0
Dołączył: 7.09.2003

Ostrzeżenie: (0%)
-----

Tworzenie ciekawych, ustandaryzowanych oraz `zhacowanych` i działających wszędzie layautów jest szeroko opisywane w serwisie A List Apart.

Polecam artykuł: Creating Liquid Layouts with Negative Margins.
Go to the top of the page
+Quote Post
mike
post
Post #5





Grupa: Przyjaciele php.pl
Postów: 7 494
Pomógł: 302
Dołączył: 31.03.2004

Ostrzeżenie: (0%)
-----

Za wcześnie się ucieszyłem.

Taki kod działa bez zarzutu.
[HTML] pobierz, plaintext 
  1. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" >
  2. <head>
  3.   <title>Test  </title>
  4.  
  5. <style type="text/css">
  6. .main {
  7. border: 1px solid red;
  8. width: 500px;
  9. margin: auto;
  10. height: 100%;
  11. }
  12. </style>
  13. </head>
  14.  
  15. <body>
  16. <div class="main">Test diva</div>
  17. </body>
[HTML] pobierz, plaintext


Ale po dodaniu:
[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 xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" >
  3.   <head>
  4.   <title>Test  </title>
  5.  
  6. <style type="text/css">
  7. .main {
  8. border: 1px solid red;
  9. width: 500px;
  10. margin: auto;
  11. height: 100%;
  12. }
  13. </style>
  14. </head>
  15.  
  16. <body>
  17. <div class="main">Test diva</div>
  18. </body>
[HTML] pobierz, plaintext

wszystko się chrzani.

No przecież nie zaczną pomijać Doctype'a :/

Pomocy raz jeszcze, bo ja już głupieję. A myślałem że znam CSS (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)
Go to the top of the page
+Quote Post
FiDO
post
Post #6





Grupa: Przyjaciele php.pl
Postów: 1 717
Pomógł: 0
Dołączył: 12.06.2002
Skąd: Wolsztyn..... Studia: Zielona Góra

Ostrzeżenie: (0%)
-----

Dodaj
Kod
body, html {
  height: 100%;
}
Go to the top of the page
+Quote Post
Diablos
post
Post #7





Grupa: Zarejestrowani
Postów: 165
Pomógł: 6
Dołączył: 17.06.2005

Ostrzeżenie: (0%)
-----

Mam podobny problem, lecz u mnie cały problem tkwi w tym ze na jdnej przegladarce jest ok, na drugiej w miare ok, a na trzeciej nie do przyjecia (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

mianowicie:

http://e37.e2u.cc/daln/


kod:
Kod
<style>
body
{
font-family: verdana, arial, serif;
margin: 0;
padding: 0;
text-align: center;
color: gray;
font-size: 10px;
text-align: left;
}

</style>
<div style="width: 100%; height: 134px; background: url(images/tlo.jpg) repeat-x; text-align: center;">
<div style=" width: 717px; height: 134px; margin: 0 auto 0 auto; background: url(images/logo.jpg) top center no-repeat;">
</div>
<div style="display: block; width: 100%; border: solid 0px; background: #f1f1f1; text-align: center;">
<div style="display: block; width: 715px; border: solid 0px; margin: 0 auto 0 auto;">

    <div style="display: block; width: 100%; height: 500px; border: solid 0px; text-align: left; background: #e6e7eb;">
      <div style="display: block; width: 183px; height: 100%; background: #dadde2; float: left; padding-top: 10px;">

       <div style="display: block; margin-top: 0px; margin-left: 10px; margin-bottom: -1px; width: 160px; height: auto; background: #9a9a9b; float: left; border: 1px solid #7e7e7e;">sadasd</div>
       <div style="display: block; margin-top: 0px; margin-left: 10px; margin-bottom: 3px; width: 160px; height: 100px; background: #bfc0c1; float: left; border: 1px solid #7e7e7e;">asd</div>
      
       <div style="display: block; margin-top: 0px; margin-left: 10px; margin-bottom: -1px; width: 160px; height: auto; background: #9a9a9b; float: left; border: 1px solid #7e7e7e;">sadasd</div>
       <div style="display: block; margin-top: 0px; margin-left: 10px; margin-bottom: 3px;  width: 160px; height: 100px; background: #bfc0c1; float: left; border: 1px solid #7e7e7e;"></div>

        <div style="display: block; margin-top: 0px; margin-left: 10px; margin-bottom: -1px; width: 160px; height: auto; background: #9a9a9b; float: left; border: 1px solid #7e7e7e;">sadasd</div>
       <div style="display: block; margin-top: 0px; margin-left: 10px; margin-bottom: 3px;  width: 160px; height: 100px; background: #bfc0c1; float: left; border: 1px solid #7e7e7e;"></div>


        <div style="display: block; margin-top: 0px; margin-left: 10px; margin-bottom: -1px; width: 160px; height: auto; background: #9a9a9b; float: left; border: 1px solid #7e7e7e;">sadasd</div>
       <div style="display: block; margin-top: 0px; margin-left: 10px; margin-bottom: 3px;  width: 160px; height: 100px; background: #bfc0c1; float: left; border: 1px solid #7e7e7e;"></div>


        <div style="display: block; margin-top: 0px; margin-left: 10px; margin-bottom: -1px; width: 160px; height: auto; background: #9a9a9b; float: left; border: 1px solid #7e7e7e;">sadasd</div>

       <div style="display: block; margin-top: 0px; margin-left: 10px; margin-bottom: 3px;  width: 160px; height: 100px; background: #bfc0c1; float: left; border: 1px solid #7e7e7e;"></div>

      </div>
<div style=" margin-top: 10px; margin-left: 3px; width: 320px; background: #f6f7f9; border: 1px solid #cacacc; float: left;">sadsadsad</div>
      <div style="display: block; width: 183px; height: 100%; background: #dadde2; float: right;">
       <div style="display: block; margin: 7pt; width: 160px; height: auto; background: #bfc0c1; float: left; border: 1px solid #7e7e7e;">sa</div>
      </div>
    </div>
    <div style="display: block; width: 100%; height: auto; border: solid 0px; background: #dadde2 top center no-repeat;">Stopka Szczurebska</div>

</div>
<div>



Pod IE:
- teoretycznie wszystko ok, jedyne co psuje wyglad to to, ze szerokosci MENU sa jakos wieksze niz na reszcie przegladarek, tak jakby IE inaczej interpretował szerokosc w px

Pod Opera:
- prawe menu nie dojezdza do konca (nie wiem jak naprawic)

Pod FF:
- najgorzej wyglada, bloki menu po lewej stronie wyjezdzaja poza div, w którym sie znajduja, a przeciez div w ktorym sie znajduja powinien sie automatycznie wydłuzac.

Prosze o pomoc z gory dziekuje.
Go to the top of the page
+Quote Post
revyag
post
Post #8





Grupa: Przyjaciele php.pl
Postów: 2 258
Pomógł: 16
Dołączył: 21.09.2004
Skąd: Kielce

Ostrzeżenie: (0%)
-----

Miałem chwilkę więc wstępnie poprawiłem ten kod, bo to była masakra (IMG:http://forum.php.pl/style_emoticons/default/snitch.gif) Trzeba by jeszcze go zoptymalizowac, wyrzucić niepotrzebne divy, ale jak mówie miałem tylko chwilkę (IMG:http://forum.php.pl/style_emoticons/default/snitch.gif)
Stosujesz mase niepotrzebnych styli, niektóre nieprawidłowo.
Np. div jest elementem blokowym, więc po co mu jeszcze styl display:block.
Co do wyświetlania trzech kolumn o takiej samej wysokości, to zajrzyj na ala, tam jest rozwiązanie problemu.
Kod
body {
    font-family: verdana, arial, serif;
    margin: 0;
    padding: 0;
    text-align: center;
    color: gray;
    font-size: 10px;
    text-align: center;
}

div#container {
    width:100%;
    margin: 0 auto;
    background: url(images/tlo.jpg) repeat-x;
}
div#logo {
    width: 717px;
    height: 134px;
    margin: 0 auto;
    background: url(images/logo.jpg) top center no-repeat;
}
div#cont {
    width: 100%;
    border: 0;
    background-color: #f1f1f1;
    text-align: center;
}
div#out {
    width: 715px;
    margin: 0 auto;
}
div#in {
    width: 100%;
    text-align: left;
    background-color: #e6e7eb;
}
div#left {
    width: 183px;
    background-color: #dadde2;
    float: left;
    padding-top: 10px;
    text-align:left;
}

div.box1,div.box2 {
    margin: 0 0 -1px 10px;
    width: 160px;
    height: auto;
    background: #9a9a9b;
    border: 1px solid #7e7e7e;
}
div.box2 {
    margin-bottom: 3px;
    height: 100px;
    background: #bfc0c1;
}

div#main {
    margin-top: 10px;
    margin-left: 3px;
    width: 320px;
    background: #f6f7f9;
    border: 1px solid #cacacc;
    float: left;    
}
div#right {
    width: 183px;
    height: 100%;
    background: #dadde2;
    float: right;
}
div.box3 {
    margin: 7pt;
    width: 160px;
    height: auto;
    background: #bfc0c1;
    border: 1px solid #7e7e7e;
}

div#foot {
    width: 100%;
    height: auto;
    background: #dadde2 top center no-repeat;
}

[HTML] pobierz, plaintext 
  1. <div id="container">
  2.     <div id="logo"></div>
  3.     <div id="cont">
  4.         <div id="out">
  5.             <div id="in">
  6.                 <div id="left">
  7.                     <div class="box1">sadasd</div>
  8.                     <div class="box2">asd</div>
  9.                     <div class="box1">sadasd</div>
  10.                     <div class="box2"></div>
  11.                     <div class="box1">sadasd</div>
  12.                     <div class="box2"></div>
  13.                     <div class="box1">sadasd</div>
  14.                     <div class="box2"></div>
  15.                     <div class="box1">sadasd</div>
  16.                     <div class="box2"></div>
  17.                 </div>
  18.                 <div id="main">sadsadsad</div>
  19.                 <div id="right">
  20.                     <div class="box3">sa</div>
  21.                 </div>
  22.                 <br style="clear:both" />
  23.             </div>
  24.             <div id="foot">Stopka Szczurebska</div>
  25.         </div>
  26.     <div>
  27. </div>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
Diablos
post
Post #9





Grupa: Zarejestrowani
Postów: 165
Pomógł: 6
Dołączył: 17.06.2005

Ostrzeżenie: (0%)
-----

ok, dzieki bardzo, jest ok w 99%... jeszcze tylko prawe menu sie nie dociaga nie wiem czemu :|
Go to the top of the page
+Quote Post
revyag
post
Post #10





Grupa: Przyjaciele php.pl
Postów: 2 258
Pomógł: 16
Dołączył: 21.09.2004
Skąd: Kielce

Ostrzeżenie: (0%)
-----

Nie dociąga się ? Chodzi o to że ma mniejszą wysokość niż to lewe ? To podałem Ci linka, gdzie jest opisane jak zrobić żeby było ok.
Go to the top of the page
+Quote Post
mike
post
Post #11





Grupa: Przyjaciele php.pl
Postów: 7 494
Pomógł: 302
Dołączył: 31.03.2004

Ostrzeżenie: (0%)
-----

W związku z tym że mam kolejny problem dotyczący wyskokości elementów blokowych a ten temat nie zjechał jszcze za nisko postanowiłem go kontynuować.

Problem jest następujący:
Mam trzy elementy blokowe A, B i C.
Wysokość dla elementu A nie jest ustawiona - zmienia się ona pod wpływem elementu B, w którym jest na przykład jakieś menu lub coś innego.
Jak sprawić że wysokość elementu C będzie zmieniała się wraz z wyskokością elementu A przyjmując maksymalną wartość, na którą może sobie pozwolić. Czyli teoretycznie 100%, ale 100% w ramach elementu A.

Kod
+------------------------------------------------+
|+-------------++-------------------------------+|
||             ||                               ||
||             ||                               ||
||             ||                               ||
||             ||                               ||
||      B      ||                               ||
||             ||                               ||
||             ||                C              ||
||             ||                               ||
|+-------------+|                               ||
|               |                               ||
|               |                               ||
|               |                               ||
|     A         |                               ||
|               +-------------------------------+|
|                                                |
|                                                |
|                                                |
+------------------------------------------------+
Go to the top of the page
+Quote Post
Kinool
post
Post #12





Grupa: Zarejestrowani
Postów: 560
Pomógł: 0
Dołączył: 15.07.2003
Skąd: Kwidzyn

Ostrzeżenie: (0%)
-----

pozwole sobie dolaczyc sie do tematu (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

mam sobie DIV-a (glownego) w niem sa osadzone inne DIV-y (kolumny z textem) jaz zrobic zeby ten kolumny mialy zawsze dlugosc glownego DIV-a??

po teraz np sa 3 kolumny w roznym stopniu wypelnione trescia i tlo dochodzi tylko do konca tresci, powstaja "schody" czego chialbym unkinac.

problem tylko w IE (gupi IE!!)

probowalem im dac height: 100% ale to nic nie daje, nadanie wysokosci glownemu DIV-owi tez odpada bo to zalezy od tego co tam wczytam, gupi IE chyba tez niezna atrybuty min-height: (IMG:http://forum.php.pl/style_emoticons/default/sad.gif)

PS. Ludzie apeluje przestancie uzywac IE a swiat stanie sie prostrzy i latwiejszy!!!!!!!! (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)
Go to the top of the page
+Quote Post
tiraeth
post
Post #13





Grupa: Przyjaciele php.pl
Postów: 1 789
Pomógł: 41
Dołączył: 30.10.2003
Skąd: Wrocław

Ostrzeżenie: (0%)
-----

IE nie zna wielu atrybutów. Nawet IE7, podobno, w wersji BETA 1 zamiast mieć naprawione poprawne wyświetlanie kodu, został dobudowany w niepotrzebne śmieci...
Go to the top of the page
+Quote Post
FiDO
post
Post #14





Grupa: Przyjaciele php.pl
Postów: 1 717
Pomógł: 0
Dołączył: 12.06.2002
Skąd: Wolsztyn..... Studia: Zielona Góra

Ostrzeżenie: (0%)
-----

Cytat(tiraeth @ 2005-08-06 18:07:37)
IE nie zna wielu atrybutów. Nawet IE7, podobno, w wersji BETA 1 zamiast mieć naprawione poprawne wyświetlanie kodu, został dobudowany w niepotrzebne śmieci...

Ja bym sie powstrzymal od tej krytyki wersji beta.. bo to zakrawa juz na bezsensowne tepienie wszystkiego co tylko wydal MS. Nie zebym za nimi przepadal, ale ostatnio chlopaki sie troche zrefrektowali i zauwazyli, ze istnieje cos takiego jak standardy i nie wymyslaja juz tyle swoich pierdol..
Juz w becie VS 2005 widac, ze zrobili duzy krok, bo kod generowany jest w XHTML'u, a jesli chodzi o IE7, to jest to pierwsza beta, w ktorej nawet nie zajmowali sie zbytnio poprawianiem obslugi CSS, ale w 2 becie ma juz byc poprawione wiekszosc slynnych bugow IE, a w finalu mozliwie duza zgodnosc z CSS2. Sugeruje zajrzec sobie na strone www.quirksmode.org, tam w ktoryms z brzegu newsie jest napisane co nieco o wersjach beta w historii przegladarek.
Tak ze ocenianie IE7 w tej chwili jest troche nierozsadne, trzeba poczekac na finala i dopiero wtedy, jesli nie wywiaza sie ze swoich obietnic, bedzie mozna znowu po nich troszke pojezdzic (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
kamiseq
post
Post #15





Grupa: Zarejestrowani
Postów: 139
Pomógł: 0
Dołączył: 12.07.2005
Skąd: krakow

Ostrzeżenie: (0%)
-----

no i co k nic nikt do konca nie wyjsanil:]
a ja tu zakladam kolejny temat i tez nic:-)
http://forum.php.pl/index.php?showtopic=34407
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 22.12.2025 - 22:36
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn