Autor Zpráva
Vojtík
Profil *
Potřeboval bych poradit, pro vás zkušené jistě triviální záležitost, ale mě se nějak nedaří

<div  style="width:200px;padding:5px;border:1px solid red;">
  <div style="min-height:100px;position:relative;overflow:hidden;">
    <div class="divhore" style="position:relation;border:1px solid green;">
      horni text, ktery pri delsim zneni preteka divdole.
      jak udelat, aby divhore automaticky tlacil divdole dolu a hlavni div automaticky zvetsoval svou vysku.
      dik
    </div>
    <div class="divdole" style="position:absolute;bottom:10px;border:1px solid blue;">
      dolni text nekolik slov 
    </div>
  </div>
</div>
Sennin
Profil
Nazdar Vojtík
position:relation <-- Také nič neexistuje ale asi si myslel relative
No ale k veci presne nerozumiem o čo sa snažíš nemáš nejakú ukážku?
Vojtík
Profil *
Sennin:
Jasně, překlep...
v podstatě nahoře je příklad. V hlavním divu o určité velikosti mám dva divy, horní a dolní, který je ukotven k dolní hraně hlavního divu, takže text v něm je dolní časti hlavního divu.
Jestliže text v horním divu je dlouhý tak, že překračuje hranici dolního divu tak texty obou divů se prolínají. Když text v horním divu je ještě delší, zvětšuje se i výška hlavního divu, a samozřejmě se dolu posouvá i dolní div s prolínajícím se textem.
Chci, když text v horním divu je dlouhý tak, že by překročil hranice dolního divu, aby nedošlo k jejich prolínání, ale naopak výška horního divu tlačila dolní div dolu a zvětšovala se výška hlavního divu.
Krkolomně popsáno, ale při aplikaci výše uvedeného kódu je jasné, o co mě jde... dik
Marschmallow
Profil
Vojtík:
Takhle nějak? Stačilo nastavit height: 100% a Tvůj kód mírně poupravit (+ hlavně zpřehlednit).

Sennin:
presne nerozumiem o čo sa snažíš
Má to ve zdrojovém kódě (co chce).
Vojtík
Profil *
Marschmallow:
No, to přesně není ono!
Pro .obal jsi tam dal height:100% což je jiné než min-height: 300px.
Ano, v tvé ukázce "tlačí" div .nahore div .dole (ve stylu máš uvedeno divdole) dolů uměrně zadanému textu, ale v žádném případě div .dole není "přilepený" na spodek divu .obal !

Teď si nastav .obal min-height: 300px . Je div .dole 10px od dolní hrany divu .obal? Dle mého není !


Ještě jenou se pokusím popsat. Jde o to, že hlavní div .obal bude mít minimální výšku 300px, horní div .nahore bude nahoře divu .obal a dolní div .dole dole divu .obal. Samozřejmě, jestliže v obou divech bude jen jedno slovo, mezi divem .nahore a .dole bude velká mezera. Ale co když výška obou divů (tzn. text bude dlouhý) překročí 300px?
Marschmallow
Profil
Vojtík:
ono!“, „.obal !“, „není !
Nekřič.

Hodila by se Živá ukázka. Popisuješ to dost krkolomně. Takže něco jako tohle (při vyplnění textem více než 300px)? A tohle (při nevyplnění méně než 300px textem)? Nebo mi něco uniká?
Tomáš123
Profil
Vojtík:
Ale co když výška obou divů (tzn. text bude dlouhý) překročí 300px?
Problém som neskúmal veľmi podrobne, ale malo by stačiť obalu nastaviť vnútorný okraj zdola s hodnotou výšky rovnakou alebo o niečo väčšou ako je výška prvku, do ktorého lezie text zhora. Ak to nepomôže, priložte prosím živú ukážku s HTML a CSS kódom.
Vojtík
Profil *
Marschmallow:
Vím, že to popisuji krkolomně. Zde už snad bude jasné, o co jde, staci postupne odkomentovat dalsi text

<!doctype html>
<style>
.obal {
    width: 200px;    
    padding: 5px;
    border: 1px solid red;
}

.divy {
    position: relative;
    min-height: 200px;
    overflow: hidden;
    border: 1px solid gray;
}

.nahore {
    position: relative; 
    border: 1px solid green;
}

.dole {
    position: absolute;
    bottom: 0px;
    border: 1px solid blue;
}
</style>
<div class="obal">
  <div class="divy">
    <div class="nahore">
      horni text, ktery pri delsim zneni preteka divdole.
      jak udelat, aby divhore automaticky tlacil divdole dolu a hlavni div automaticky zvetsoval svou vysku.      
      dik
      <!--dalsich nekolik slov aby se to prolinalo do dolniho divu coz nechci, aby bylo-->
      <!--plus nekolik dalsich slov, aby bylo videt co se deje pri textu delsim nez defaultnich 300px-->
    </div>
    <div class="dole">
      dolni text nekolik slov v dolni casti
    </div>
  </div>
</div>
Tomáš123
Profil
Vojtík:
Prečítajte si to ešte raz[#7]. Funguje to. Podrobné vysvetlenie simuluje výplň horného divu.
Vojtík
Profil *
Tomáš123:
Jo, jo, už to vidím. Toto je přesně ono. Mnohokrát dík, už jsem se v tom motal

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0