DIV height: 100%

DIV height: 100%

offline
  • Pridružio: 20 Jul 2008
  • Poruke: 4682

Treba mi resenje da kontejneru i objektima u njemu height bude 100%, ali da objektima u kontejneru position bude absolute, ako je kako izvodljivo . U donjem primeru sve radi kako treba ali nije position: absolute. Overflow mi nije zadovoljavajuce resenje Mr. Green .
Ako se neko pita "sto da div-ovi u kontejneru budu absolute, kada ovako radi svoj posao", pa zato sto mi je lakse da uhvatim div-ove sa misem i da ih bacam po kontejneru kako ja hocu, dosta je brze, slozim caskom Cool .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> #kontejner {    background-color: #CCC;    height: 100%;    width: 900px;    margin-right: auto;    margin-left: auto;    position: relative; } #zeleni {    background-color: #3C9;    height: 100%;    width: 400px;    left: 276px;    top: 554px;    margin-left: 250px; } #zuti {    background-color: #FF6;    height: 100%;    width: 900px; } #plavi {    background-color: #06F;    height: 100%;    width: 200px;    left: 0px;    top: 151px;    margin-left: 350px; } #crveni {    background-color: #C30;    height: 100%;    width: 900px;    left: 1px;    top: 353px; } body {    height: 100%; } </style> </head> <body> <div id="kontejner">   <div id="zuti"><strong>Lorem Ipsum</strong> is simply dummy text of the printing and   typesetting industry. Lorem Ipsum has been the industry's standard dummy   text ever since the 1500s, when an unknown printer took a galley of   type and scrambled it to make a type specimen book. It has survived not   only five centuries, but also the leap into electronic typesetting,   remaining essentially unchanged.   </div>     <div id="plavi"><strong>Lorem Ipsum</strong> is simply dummy text of the printing and   typesetting industry. Lorem Ipsum has been the industry's standard dummy   text ever since the 1500s</div>     <div id="crveni"><strong>Lorem Ipsum</strong> is simply dummy text of the printing and   typesetting industry. Lorem Ipsum has been the industry's standard dummy   text ever since the 1500s, when an unknown printer took a galley of   type and scrambled it to make a type specimen book. It has survived not   only five centuries, but also <strong>Lorem Ipsum</strong> is simply dummy text of the printing and   typesetting industry.</div>     <div id="zeleni"><strong>Lorem Ipsum</strong> is simply dummy text of the printing and   typesetting industry. Lorem Ipsum has been the industry's standard dummy   text ever since the 1500s, when an unknown printer took a galley of   type and scrambled it to make a type specimen book. It has survived not   only five centuries, but also <strong>Lorem Ipsum</strong> is simply dummy text of the printing and   typesetting industry.</div> </div> </body> </html>



Registruj se da bi učestvovao u diskusiji. Registrovanim korisnicima se NE prikazuju reklame unutar poruka.
offline
  • Mladen Stanojevic
  • Pridružio: 04 Jan 2010
  • Poruke: 58
  • Gde živiš: Smederevo

html{
height:100%;
}
body{
height:100%;
}

probaj da ubacish ovo...



offline
  • Pridružio: 20 Jul 2008
  • Poruke: 4682

Ne radi ni ovako. Ne znam da li smo se razumeli, ovaj gornji primer radi kako treba, ali ne radi ako div-ovima u kontejneru postavim apsolutnu poziciju (a sa apsolutnom pozicijom mogu da ih pomeram po kontejneru kako ja hocu sa misom i da budu tu gde sam ih stavio). E sada je pokusavam da nadjem resenje da height: 100% radi kako treba, a da usput mogu div-ove po kontejneru da pomeram rucno. Nije mi ovo nesto preterano sada bitno, nego me zaintrigira pa jbg. Inace dade mi sada ovaj tvoj primer jos jednu ideju, cu je probam, pa javim. Ziveli

offline
  • Pridružio: 06 Sep 2008
  • Poruke: 150
  • Gde živiš: Obrenovac

Nisam siguran da sam dobro razumeo, ali pri apsolutnom pozicioniranju obavezno prvo "obuhvati" sve sto pozicioniras apsolutno sa jednim div-om koji pozicioniras relativno.

<div style="position:relative;">
Pa svi tvoji apsolutno pozicionirani divo-ovi....
</div>
Pozzz...

offline
  • Pridružio: 20 Jul 2008
  • Poruke: 4682

Napisano: 08 Jul 2011 21:50

Probao sam i to, nema sta nisam. Ali izgleda je to sto sam ja zamislio nemoguce Mr. Green

Hvala u svakom slucaju Ziveli

Dopuna: 09 Jul 2011 0:38

Da dopunim, naime kada je kontejner relativan, a objekti u njemu apsolutni to je donekle prava stvar. Onda pomers objekte u kontejneru sa misom kako hoces i oni tu ostaju. E ali tako nisi u mogucnosti da se div-ovi u kontejneru automatski sire, a da samim svojim sirenjem sire i kontejner. Cak sta vise ovo sa pomernjem objekata misom radi kada je i kontejner apsolutan (samo sto ima druga fora za pozicioniranje na sredinu, nego kada je relativan).

offline
  • Pridružio: 31 Maj 2008
  • Poruke: 202
  • Gde živiš: Iza sedam brda, iza sedam gora.

Probaj da ti height bude bez vrednosti, primer:
<style type="text/css">
#zuti {
background-color: #FF6;
width: 900px;
}
/*a moze i width=100%;*/

<div id="zuti"><h1>Lorem Ipsum</h1><br/> <p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p></div>
Tako da ce ti se height po potrebi siriti ili skupljati, zavisno od sadrzaja.

offline
  • Pridružio: 20 Jul 2008
  • Poruke: 4682

Ma stavljao ga i bez vrednosti i "auto", nema sta nisam probao Smile .

Ko je trenutno na forumu
 

Ukupno su 504 korisnika na forumu :: 12 registrovanih, 3 sakrivenih i 489 gosta   ::   [ Administrator ] [ Supermoderator ] [ Moderator ] :: Detaljnije

Najviše korisnika na forumu ikad bilo je 3028 - dana 22 Nov 2019 07:47

Korisnici koji su trenutno na forumu:
Korisnici trenutno na forumu: A.R.Chafee.Jr., cvrle312, Dežurni pod palubom, galijot, ikan, liman2, LUDI2, samsung2, shaja1, tomigun, Trpe Grozni, W123