Avaleht
uus teema   vasta Tarkvara »  WWW »  div height 100% märgi kõik teemad loetuks
märgi mitteloetuks
vaata eelmist teemat :: vaata järgmist teemat
Hinnavaatlus :: Foorum :: Uudised :: Ärifoorumid :: HV F1 ennustusvõistlus :: Pangalink :: Telekavad :: HV toote otsing
autor
sõnum Saada viide sõbrale.  :: Teata moderaatorile teata moderaatorile
otsing:  
keevitaja
AM 10 aastat
keevitaja

liitunud: 05.11.2001
sõnum 06.09.2010 20:20:10 div height 100% vasta tsitaadiga
kas css3 või jquery suudab seda kuidagi teha? ja mitte, et 100% = brauseri kõrgusega, vaid nii, et venitab kuni jõuab alla välja ilma et scrollbar tekiks. sarnaselt nagu div width defaultis on...
_________________
Hinnavaatlus ei ole koht arvamuse avaldamiseks!
Kommentaarid: 51 loe/lisa Kasutajad arvavad:  :: 1 :: 3 :: 40
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
Renka
HV Guru
Renka

liitunud: 01.04.2002
sõnum 06.09.2010 22:27:59 vasta tsitaadiga
Aga see on ju koguaeg võimalik olnud.

HTML ja BODY elemendile pead lihtsalt samuti kõrguse andma, et see töötaks
_________________
There is no place like 127.0.0.1
Kommentaarid: 71 loe/lisa Kasutajad arvavad:  :: 2 :: 1 :: 61
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
keevitaja
AM 10 aastat
keevitaja

liitunud: 05.11.2001
sõnum 07.09.2010 13:55:51 vasta tsitaadiga
ei toimi... selliselt venitab ta selle alumise containeri sama pikaks kui on body. tahaks lihtsalt et venitaks võimalikult pikaks ilma scrolli tekitamata...

html:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. body, html {
  8.         margin:0;
  9.         padding:0;
  10.         height:100%;
  11. }
  12. #header {
  13.         background-color:#CCC;
  14.         width:900px;
  15.         height:200px;
  16. }
  17. #container {
  18.         width:900px;
  19.         height:100%;
  20.         background-color:#999;
  21. }
  22. </style>
  23. </head>
  24.  
  25. <body><div id="header"></div><div id="container"></div>
  26. </body>
  27. </html>

_________________
Hinnavaatlus ei ole koht arvamuse avaldamiseks!
Kommentaarid: 51 loe/lisa Kasutajad arvavad:  :: 1 :: 3 :: 40
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
Peeter
HV kasutaja

liitunud: 07.02.2007



Autoriseeritud ID-kaardiga
sõnum 07.09.2010 14:13:29 vasta tsitaadiga
keevitaja kirjutas:
ei toimi... selliselt venitab ta selle alumise containeri sama pikaks kui on body. tahaks lihtsalt et venitaks võimalikult pikaks ilma scrolli tekitamata...


Proovi nii:

html:
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>Untitled Document</title>
  7. <style type="text/css">
  8. body, html {
  9.         margin:0;
  10.         padding:0;
  11.         height:100%;
  12. }
  13. .container {
  14.         display:table;
  15.         position:relative;
  16.         width:900px;
  17.         height:100%;
  18.         background-color:#999;
  19. }
  20. .container-inner {
  21.         display:table-cell;
  22.         position:relative;
  23. }
  24.  
  25. .header {
  26.         background-color:#CCC;
  27.         width:900px;
  28.         height:200px;
  29. }
  30.  
  31. </style>
  32. </head>
  33. <body>
  34. <div class="container">
  35.         <div class="container-inner">
  36.                 <div class="header">Header</div>
  37.                 <div class="content">Sisu</div>
  38.         </div>
  39. </div> 
  40. </div>
  41. </body>
  42. </html>
  43.  


Üldiselt ei ole mõtet ka ID'sid anda html elementidele, kui sa just ei taha javascriptiga neile ligi pääseda. Stiili andmiseks ikka class.
Kommentaarid: 8 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 8
tagasi üles
vaata kasutaja infot saada privaatsõnum
mikk36
HV Guru
mikk36

liitunud: 21.02.2004
sõnum 07.09.2010 14:14:15 vasta tsitaadiga
Peeter, klass või id on puhtalt struktureerimise teema ju.
Kommentaarid: 85 loe/lisa Kasutajad arvavad:  :: 0 :: 2 :: 78
tagasi üles
vaata kasutaja infot saada privaatsõnum
andrusny
Kreisi kasutaja
andrusny

liitunud: 20.03.2006
sõnum 07.09.2010 14:34:49 vasta tsitaadiga
tsitaat:
ei toimi... selliselt venitab ta selle alumise containeri sama pikaks kui on body. tahaks lihtsalt et venitaks võimalikult pikaks ilma scrolli tekitamata

Sõnastad ennast vist valesti.
tsitaat:
div height 100%


Sa jätad mainimata mille suhtes 100% terve teema jooksul tundub, et soovid lihtsalt , et div kõrgus muutuks vastavalt sisule siis, et sisu suhtes 100% aga div height % määratakse välimise elemendi suhtes.
_________________
Kommentaarid: 7 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 7
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
keevitaja
AM 10 aastat
keevitaja

liitunud: 05.11.2001
sõnum 07.09.2010 14:41:56 vasta tsitaadiga
div height on 100% vaba browseri kõrguse suhtes... ei oska nagu paremini sõnastada. sama moodi nagu div ennast laiusesse venitab ilma laiust määramata...
_________________
Hinnavaatlus ei ole koht arvamuse avaldamiseks!
Kommentaarid: 51 loe/lisa Kasutajad arvavad:  :: 1 :: 3 :: 40
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
andrusny
Kreisi kasutaja
andrusny

liitunud: 20.03.2006
sõnum 07.09.2010 15:05:56 vasta tsitaadiga
Kas selline lahendus ei kõlba? Oleneb, kuidas välja peab nägema, nüüd on üleval see 200px riba ja all tumedamale saad teksti lisada ja kui läheb pikemaks kui on tume ala, siis venib tume kaasa.

html:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. body, html {
  8.         margin:0;
  9.         padding:0;
  10.         height:100%;
  11.                
  12. }
  13. #mast{ min-height:100%; width:900px;background-color:#999;}
  14. #header {
  15.         background-color:#CCC;
  16.         width:900px;
  17.         height:200px;
  18. }
  19. #container {
  20.         width:900px;
  21.        
  22.        
  23. }
  24. </style>
  25. </head>
  26.  
  27. <body>
  28. <div id="mast">
  29. <div id="header"></div>
  30. <div id="container">eeee
  31. efwefwe<br>we
  32. </div>
  33. </div>
  34. </body>
  35. </html>

_________________
Kommentaarid: 7 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 7
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
keevitaja
AM 10 aastat
keevitaja

liitunud: 05.11.2001
sõnum 07.09.2010 15:58:22 vasta tsitaadiga
ei, kuna ikka vaja, et see container oleks ka reaalselt alla lõpuni välja venitatud.

ehk saab asja kuidagi javascriptiga teha? css seda ei võimalda. on küll mingi kompunn olemas, kuid tahaks lihtsat koodi
_________________
Hinnavaatlus ei ole koht arvamuse avaldamiseks!
Kommentaarid: 51 loe/lisa Kasutajad arvavad:  :: 1 :: 3 :: 40
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
Timukas0
HV kasutaja
Timukas0

liitunud: 20.03.2007
sõnum 07.09.2010 16:22:38 vasta tsitaadiga
Mingit pilti ei saa teha, kuidas asi välja peaks nägema. Pole siiani aru saanud, kuhu "alla" see container peab venima?
Kommentaarid: 3 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 3
tagasi üles
vaata kasutaja infot saada privaatsõnum
andrusny
Kreisi kasutaja
andrusny

liitunud: 20.03.2006
sõnum 07.09.2010 16:33:53 vasta tsitaadiga
tsitaat:
ehk saab asja kuidagi javascriptiga teha?



html:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <script>
  7. window.onload = function() {
  8. var  theHeight, konH;
  9. var container = document.getElementById('container');
  10.  
  11. if (window.innerHeight) {
  12. theHeight=window.innerHeight;
  13.  konH =document.getElementById('container').innerHeight;
  14. }
  15. else if (document.documentElement && document.documentElement.clientHeight) {
  16. theHeight=document.documentElement.clientHeight;
  17.  konH =document.getElementById('container').clientHeight;
  18. }
  19. else if (document.body) {
  20. theHeight=document.body.clientHeight;
  21. }
  22.  
  23. var h = window.height;
  24. if(konH<theHeight-200){container.style.height = theHeight-200 + "px"; }
  25.  
  26. };
  27. </script>
  28. <style type="text/css">
  29. body, html {
  30.         margin:0;
  31.         padding:0;
  32.         height:100%;
  33. }
  34. #header {
  35.         background-color:#CCC;
  36.         width:900px;
  37.         height:200px;
  38. }
  39. #container {
  40.         width:900px;
  41.         background-color:#999;
  42. }
  43. </style>
  44. </head>
  45.  
  46. <body>
  47. <div id="header"></div>
  48. <div id="container"></div>
  49. </body>
  50. </html>

_________________
Kommentaarid: 7 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 7
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
mikk36
HV Guru
mikk36

liitunud: 21.02.2004
sõnum 07.09.2010 18:19:44 vasta tsitaadiga
andrusny, mulje jäänud et keevitaja kasutab niikuinii jQuery't, seega oleks ehk kena mingi ilusam kood tolles valmistada?
Kommentaarid: 85 loe/lisa Kasutajad arvavad:  :: 0 :: 2 :: 78
tagasi üles
vaata kasutaja infot saada privaatsõnum
keevitaja
AM 10 aastat
keevitaja

liitunud: 05.11.2001
sõnum 07.09.2010 18:29:39 vasta tsitaadiga
ehk saab jquerys kuidagi paremini jah... aga põmst siis on seal selline lahendus, et leitakse browseri hetkekõrgus millest siis lahutatakse muud blokid maha ja saadakse lõpuks see õige containeri height?
_________________
Hinnavaatlus ei ole koht arvamuse avaldamiseks!
Kommentaarid: 51 loe/lisa Kasutajad arvavad:  :: 1 :: 3 :: 40
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
Celos
Kreisi kasutaja
Celos

liitunud: 23.08.2005
sõnum 07.09.2010 18:35:29 vasta tsitaadiga
Peeter kirjutas:
Üldiselt ei ole mõtet ka ID'sid anda html elementidele, kui sa just ei taha javascriptiga neile ligi pääseda. Stiili andmiseks ikka class.


Täielik nonsenss.
Kommentaarid: 16 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 15
tagasi üles
vaata kasutaja infot saada privaatsõnum
keevitaja
AM 10 aastat
keevitaja

liitunud: 05.11.2001
sõnum 07.09.2010 18:50:24 vasta tsitaadiga
no jquerys tegelt eriti lihte icon_lol.gif oleks võin kohe proovida

javascript:
  1.  
  2. $(function() {
  3.         var dHeight = $('body').height();
  4.         var cHeight = dHeight - 200;
  5.         $('#container').height(cHeight);
  6. });


aga kui nüüd minna siit edasi, kas kuidagi liquide oleks võimalik saavutada. ehk kui kasutaja resizeb brauserit? kas jquery sellist eventi nagu browseri resize teab?

edit: ise küsin, ise vastan icon_lol.gif

javascript:
  1.  
  2. function set_height() {
  3.         var dHeight = $('body').height();
  4.         var cHeight = dHeight - 200;
  5.         $('#container').height(cHeight);
  6. }
  7.  
  8. $(function() {
  9.         set_height();
  10.         $(window).resize(function() {
  11.                 set_height();
  12.         });
  13. });

_________________
Hinnavaatlus ei ole koht arvamuse avaldamiseks!
Kommentaarid: 51 loe/lisa Kasutajad arvavad:  :: 1 :: 3 :: 40
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
keevitaja
AM 10 aastat
keevitaja

liitunud: 05.11.2001
sõnum 07.09.2010 19:04:54 vasta tsitaadiga
Celos kirjutas:
Peeter kirjutas:
Üldiselt ei ole mõtet ka ID'sid anda html elementidele, kui sa just ei taha javascriptiga neile ligi pääseda. Stiili andmiseks ikka class.


Täielik nonsenss.


mulle kunagi targad mehed rääkisid, et id antakse elemendile mis on kordumatu, näiteks header või logo. aga class nendele mis on korduvad, näiteks img, li jne
_________________
Hinnavaatlus ei ole koht arvamuse avaldamiseks!
Kommentaarid: 51 loe/lisa Kasutajad arvavad:  :: 1 :: 3 :: 40
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
keevitaja
AM 10 aastat
keevitaja

liitunud: 05.11.2001
sõnum 01.10.2010 20:37:53 vasta tsitaadiga
oskab keegi öelda, miks tehakse margin-bottom 30px? peaks olema ju 15

html:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  7. <style type="text/css">
  8. html, body {
  9.         margin:0;
  10.         padding:0;
  11.         height:100%;
  12. }
  13. #mainwrap {
  14.         background-color:#CCC;
  15.         margin-left:auto;
  16.         margin-right:auto;
  17.         width:960px;
  18.         margin-bottom:15px;
  19.         margin-top:15px;
  20. }
  21. </style>
  22. <script type="text/javascript">
  23. function set_height() {
  24.         var dHeight = $('body').height();
  25.         var cHeight = dHeight - 30;
  26.         $('#mainwrap').height(cHeight);
  27. }
  28.  
  29. $(document).ready(function() {
  30.         set_height();
  31.         $(window).resize(function() {
  32.                 set_height();
  33.         });
  34. });
  35. </script>
  36. </head>
  37.  
  38. <body>
  39. <div id="mainwrap"> tere see on proov </div>
  40. </body>
  41. </html>
  42.  

_________________
Hinnavaatlus ei ole koht arvamuse avaldamiseks!
Kommentaarid: 51 loe/lisa Kasutajad arvavad:  :: 1 :: 3 :: 40
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
mikk36
HV Guru
mikk36

liitunud: 21.02.2004
sõnum 01.10.2010 21:58:17 vasta tsitaadiga
Mis margin-bottom: 30px?
Su koodist loen vaid välja, et ülevalt on 15px, alt 15px ja kokku teeb see kõrguseks 30px väiksema kui body.
Kommentaarid: 85 loe/lisa Kasutajad arvavad:  :: 0 :: 2 :: 78
tagasi üles
vaata kasutaja infot saada privaatsõnum
keevitaja
AM 10 aastat
keevitaja

liitunud: 05.11.2001
sõnum 01.10.2010 22:05:21 vasta tsitaadiga
jah, aga kui nüüd seda asja brauseris kuvada, siis nagu teeks alla 30. ilma selle javascriptita ei tee. ühesõnaga tekib see scrolli riba ja all on margin 2x rohkem kui üleval!
_________________
Hinnavaatlus ei ole koht arvamuse avaldamiseks!
Kommentaarid: 51 loe/lisa Kasutajad arvavad:  :: 1 :: 3 :: 40
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
asjameez
Kreisi kasutaja
asjameez

liitunud: 10.12.2006
sõnum 02.10.2010 01:02:44 vasta tsitaadiga
Vast kõige lihtsam viis:

overflow: hidden;

See rida käib ümber oleva div-i kohta.

margin-bottom: -999999px;
padding-bottom: 999999px;

Need paar rida lähevad selle div-i alla, mida tahad 100% kõrgeks ajada.
Kommentaarid: 63 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 61
tagasi üles
vaata kasutaja infot saada privaatsõnum
näita postitusi alates eelmisest:   
uus teema   vasta Tarkvara »  WWW »  div height 100%
[vaata eelmist teemat] [vaata järgmist teemat]
 lisa lemmikuks
näita foorumit:  
 ignoreeri teemat 
sa ei või postitada uusi teemasid siia foorumisse
sa ei või vastata selle foorumi teemadele
sa ei või muuta oma postitusi selles foorumis
sa ei või kustutada oma postitusi selles foorumis
sa ei või vastata küsitlustele selles foorumis
sa ei saa lisada manuseid selles foorumis
sa võid manuseid alla laadida selles foorumis



Hinnavaatlus ei vastuta foorumis tehtud postituste eest.