ugrás a tartalomhoz

DIV height 100% megint

Blintux · 2009. Okt. 10. (Szo), 10.36
Sziasztok!

Az alabbi peldaban a container elnevezesu DIV szepen kitolti a fuggoleges teret, tehat 100% magasagban a browsert. Viszont a content azonositoju DIV-et erre sehogy nem tudom ravenni. Ha siman 100%-ra allitom, akkor pont a bongeszo magasagat kapja, es ugye igy megjelenik a gorgeto savok, mivel a fejlec tullog az egeszen.

HTML:
  1. <body>  
  2.     <div id="container">  
  3.   
  4.         <div id="header">  
  5.             <h1>Fejlec</h1>  
  6.         </div>  
  7.   
  8.         <div id="content">  
  9.             content  
  10.         </div>  
  11.   
  12.         <div id="navbar">  
  13.             Navbar  
  14.         </div>  
  15.           
  16.         <div id="footer">  
  17.             Footer  
  18.         </div>  
  19.           
  20.     </div>  
  21.   
  22. </body>  
CSS:
  1. html,body {  
  2.     margin:0;  
  3.     padding:0;  
  4.     height:100%;  
  5.     background:blue;  
  6. }  
  7.   
  8. #container {  
  9.     position:relative;  
  10.     width:750px;  
  11.     background:yellow;  
  12.     height:auto;  
  13.     height:100%;   
  14.     min-height:100%;   
  15. }  
  16.   
  17. #header {  
  18.     padding:1em;  
  19.     background:#ddd;  
  20. }  
  21.   
  22.   
  23. #content {  
  24.     width:200px;  
  25.     background:orange;  
  26.     position:relative;  
  27.     height:100%;  
  28. }  
  29.   
  30. #footer {  
  31.     height:200px;  
  32.     width:100%;  
  33.     background:#ddd;  
  34. }  
‹ Joomla <audio> és icecast ›
 ■
1

Mindig ugy jarok, ha leirom a

Blintux · 2009. Okt. 10. (Szo), 10.45
Mindig ugy jarok, ha leirom a problemat, akkor utana 5 percre rajovoka megoldasra.
Szoval mar megvan a megoldas:)
2

megoldást

solkprog · 2009. Okt. 10. (Szo), 11.08
Ilyenkor illik beírni a megoldást is, hogy később egyrészt akár hivatkozhassunk rá, másrészt ha valaki megtalálja ezt a topicot akkor ne csak a kérdést lássa.
3

Bocsanat, csak sietnem

Blintux · 2009. Okt. 10. (Szo), 11.18
Bocsanat, csak sietnem kellet, es csak azert irtam be gyorsan, hogy mas ne torje magat miattam.

Szoval a mukodo kod:

HTML:
  1. <body>  
  2.     <div id="container">  
  3.       
  4.         <div id="header">  
  5.             <h1>Fejlec</h1>  
  6.         </div>  
  7.           
  8.         <div id="content">  
  9.             content   
  10.         </div>  
  11.           
  12.         <div id="footer">  
  13.             Footer  
  14.         </div>  
  15.           
  16.     </div>  
  17. </body>  
CSS:
  1. html, body {  
  2.     height: 100%;  
  3.     padding: 0;  
  4.     margin: 0;  
  5. }  
  6.   
  7. #container {  
  8.     position: relative;  
  9.     height: 100%;  
  10.     width: 600px;  
  11.     margin: 0 auto;  
  12.     background:red;  
  13. }  
  14.   
  15. #header, #footer {  
  16.     height: 100px;  
  17.     background: #dad;  
  18.     position: absolute;  
  19.     left: 0;  
  20.     right: 0;  
  21. }  
  22.   
  23. #header {  
  24.     top: 0;  
  25. }  
  26.   
  27. #footer {  
  28.     bottom: 0;  
  29. }  
  30.   
  31. #content {  
  32.     position: absolute;  
  33.     top: 100px;  
  34.     bottom: 100px;  
  35.     left: 0;  
  36.     right: 0;  
  37.     background: #ffc;  
  38.     overflow: auto;  
  39. }  
4

Összefoglalva

Manassé · 2013. Már. 30. (Szo), 22.39
Nekem is szembejött a probléma (menüt készítettem két oldalra).
Összefoglalva a megoldást az jelentette, hogy annak az objektumnak a position értékét relative-ra, amiben a 100%-osnak kívánt objektum található. Ez megtehető természetesen a body-val is.