Autor Zpráva
kuxa
Profil
Zdravím,
mám stejný problém jako tady, jenže s dvěma rozdíly:
1. Mám jinou šablonu
2. Nefunguje to řešení
Šablona
body 
 {
  padding: 0px;
  margin: 0px auto; 
 }

#obsah 
 {
  width: 1036px;
  margin: 0px auto;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 2px;
  min-height: 660px;
  border: 1px solid black;
}

#paticka
 {
  text-align: center;
  width: 1000px;
  margin: 0px auto;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 3px 3px 3px 3px; 
 } 

#hlavni_obsah 
 {
  border: 1px solid black;
  position: relative;
  float: left;
  width: 880px;
  text-align: left;
  min-height: 100%;
}

#bocni_panel
 {
  border: 1px solid black;
  position: relative;
  float: left;
  width: 140px;
  text-align: left;
  margin-right: 10px;
  min-height: 100%;
}
 

  <div id="hlavicka">
   hlavička
  </div>
  <div id="obsah">  
   <div id="bocni_panel">
    panel
   </div>   
  <div id="hlavni_obsah">
  nějaký text, který je hóooodně dlouhý
  </div>
  </div>
  <div id="paticka">
   patička
  </div>
 </body>
</html>
 

Víte někdo prosím, jak to vyřešit? Jak už jsem řekl řešení zhora nefunguje. Děkuji předem!
Tomáš123
Profil
kuxa:
Odpoveď naformátujem podobne ako ty otázku:
Chyba: clear: both (po plávajúcich prvkoch), #hlavni_obsah {min-height: 660px} a html, body {height: 100%}

Podľa úprav som dorobil tvoj kód a funguje. Ak si fakt nebudeš vedieť rady, pošlem ti tú ukážku, ale navrhujem, aby si najprv skúsil použiť vlastnú hlavu.
kuxa
Profil
Tak už jsem to částečně vyřešil...
Pozadí se prodlužuje jak má, ale mám v obsahu "stopu" po bočním panelu...

Asi to bude tím floatem, ale ani za nic nemůžu přijít na to, jak to spravit... Víte prosím někdo, jak na to? Děkuji.

Kód:
#hlavni_obsah 
 {
  border: 1px solid black;
  position: relative;
  top: 0px;
  left: 150px;
  width: 880px;
  text-align: left;
 }

#bocni_panel
 {
  border: 1px solid black;
  position: relative;
  float: left;
  left: 0px;
  width: 140px;
  text-align: left;
  margin-right: 10px;
  min-height: 660px;
 }
edit: Promiň, tvé zprávy jsem si všimnul až po odeslání téhle :D Zkusím to zítra a dám vědět
kuxa
Profil
Tomáš123: Promiň, ale pořád na to nemůžu přijít. CSS jsem se nikdy moc neučil, vždy jsem si jen našel to, co jsem potřeboval, a pak si to snad nějak zapamatoval. Napíšeš mi prosím řešení, na které jsi přišel? Děkuju.
Tomáš123
Profil
kuxa:
Dobre teda. Tu to je. Ak by si to chcel ešte o úroveň vyššie, pozri si túto ukážku.
kuxa
Profil
Super, díky! Už to částečně funguje :). Patička se posune dobře (spolu s hlavním_obsahem), ale obsah se nezvětší spolu s hlavním_obsahem:


A nedělá to tak ani ten tvůj příklad. Víš prosím, jak to opravit? Děkuju!
Tomáš123
Profil
kuxa:
Obecne patrí situácia, ktorú chceš dosiahnuť medzi dosť ťažko riešiteľné. Skúsil som to objasniť v ukážke, na ktorú som ťa odkázal vyššie [#5]. Taktiež som nedávno pozoroval dosť zvláštne správanie clearu. Keď sa dostanem ku počítaču, skúsim vytvoriť ukážku.
Keeehi
Profil
kuxa:
Vynechej height z obsahu a bude to ok. Pokud chceš mít nějakou minimální výšku, použij min-height.
kuxa
Profil
Děkuji za radu. Bohužel obě uvedené možnosti jsem už zkoušel - když zadám min-height: 100%, je výsledek stejný jako s height, a když height úplně vynechám, je obsah vysoký 2 px (kvůli padding, jinak by asi zmizel úplně)
Keeehi
Profil
Ono to ale funguje. Raději jsem připravil ukázky

Bez height: Živá ukázka
S min-height, krátký text: Živá ukázka
S min-height, dlouhý text: Živá ukázka
kuxa
Profil
Tak to je hodně zvláštní, mě to vážně nefunguje... :(. I když i z logickýho hlediska by mělo...
Každopádně, už jsem to vyřešil! Stačilo do #obsah přidat content: ""; display: table; clear: both;
Děkuji všem za rady, bez vás bych to nevyřešil :)
Tomáš123
Profil
kuxa:
Situácia s clear funguje iba ak je jeden z panelov vyšší. Ide o ďalšie možné riešenie rovnako vysokých stĺpcov.

Ako sám píšeš, šlo by to tabuľkou, resp. display: table;.

Keeehi:
Cieľom bolo dostať pätičku vždy dole. Nikdy nevieš ako vysoký monitor má užívateľ. Preto nejde pre min-height použiť absolútnu hodnotu. Taktiež sa nedá vnárať dva prvky s min-height: 100%.
Keeehi
Profil
Tomáš123:
Mít patičku vždy dole jsem z té konverzace nějak nevydoloval. V tom případě bych to viděl na 2 problémy: 1) 2 sloupce vedle sebe obalené rodičem, 2) patička vždy dole. První problém je snad jasný a pdo druhý s úspěchem používám ryanfait.com/sticky-footer
Tomáš123
Profil
Keeehi:
Mít patičku vždy dole jsem z té konverzace nějak nevydoloval.
Možno to kuxa mienil inak, ale ja som to pochopil tak, že chce mať obidva stĺpce vysoké minimálne 100% (čiže pätička bude až pod nimi, vždy dole)

1) 2 sloupce vedle sebe obalené rodičem, 2) patička vždy dole
3) Rovnako vysoké stĺpce

Článok na ktorý si odkázal sa orientuje na jednostĺpcový layout.

kuxa:
ale obsah se nezvětší spolu s hlavním_obsahem
To bol ten problém. Vznikol kvôli tomu, že nejde s návratom očakávaných výsledkov vnárať dva prvky s min-height. kuxa to však vyriešil inak.

Vaše odpověď

Mohlo by se hodit

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

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