Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Div na całą wysokość
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
m4tx
3.06.2010, 13:12:22
Witam.

Tworzę stronę, no i potrzebuję ustawić div'a na całą wysokość. Ustawiłem więc dla html, body i tego div'a (#top) height 100%, i działa, lecz jak zmniejszę okno przeglądarki tak, aby pojawił się pionowy pasek przewijania, po przewinięciu, w dolnej części strony nie ma tła.

Adres strony to www.socrates-comenius.za.pl

Proszę o pomoc
Z góry dziękuję
Pozdrawiam
krzysztof_kf
3.06.2010, 13:14:53
dla top dodaj 

[CSS] pobierz, plaintext 
  1.  
  2. #top { 
  3. overflow: hidden;
[CSS] pobierz, plaintext
m4tx
3.06.2010, 13:17:37
Teraz się w ogóle pasek przewijania nie pojawia...
krzysztof_kf
3.06.2010, 13:24:35
ustaw dla topu 

[CSS] pobierz, plaintext 
  1. height: auto;
[CSS] pobierz, plaintext
m4tx
3.06.2010, 13:27:59
Jak daję height auto to tak jakbym w ogóle nie dał tego height (tło jest na całą stronę, ale jeśli przeglądarka jest większa od strony to na dole jest przestrzeń niewypełniona tłem)
krzysztof_kf
3.06.2010, 13:40:49
wyrzuć ze stopki
[CSS] pobierz, plaintext 
  1. #stopka {
  2.  clear: both;
[CSS] pobierz, plaintext



i dla selektora o nazwie #stopka 

[CSS] pobierz, plaintext 
  1. #stopka { 
  2. float: left;
[CSS] pobierz, plaintext



Plus wyrzuć z 

[CSS] pobierz, plaintext 
  1. html, body { 
  2. height: 100%; // po co to 
[CSS] pobierz, plaintext


dla top dodaj 
[CSS] pobierz, plaintext 
  1. #top { 
  2. overflow: hidden;
[CSS] pobierz, plaintext
m4tx
3.06.2010, 13:55:41
Jak tak zrobię to mi wychodzi to co wcześniej napisałem:

Cytat(m4tx @ 3.06.2010, 14:27:59 ) *
tło jest na całą stronę, ale jeśli przeglądarka jest większa od strony to na dole jest przestrzeń niewypełniona tłem


A co do komentarza "// po co to" to już odpowiadam - ano po to, żeby mi rozciągało tą stronę na całe okno przeglądarki
krzysztof_kf
3.06.2010, 14:04:00
Może inaczej wklej to i problem rozwiązany bo nadajemy na innych falach 

[CSS] pobierz, plaintext 
  1. .tekst {
  2. 	text-align: justify;
  3. }
  4.  
  5. .gora {
  6. 	border: none;
  7. 	margin-left: 10px;
  8. }
  9.  
  10. .stopka {
  11. 	text-align: center;
  12. }
  13.  
  14. h1 {
  15. 	margin-top: 0px;
  16. }
  17.  
  18. html, body {
  19. 	background-color: #ccc;
  20. 	background-image: url(../img/background.gif);
  21. 	color: #000;
  22. 	margin: 0;
  23. 	padding: 0;
  24. }
  25.  
  26.  
  27.  
  28. #top {
  29. 	background-image: url(../img/tlotop.png);
  30. 	background-repeat: repeat-y;
  31. 	width: 980px;
  32. 	height: 100%;
  33. 	overflow: hidden;
  34. 	margin-left: auto;
  35. 	margin-right: auto;
  36. }
  37.  
  38. #NAGLOWEK {
  39. 	text-align: center;
  40. }
  41.  
  42. #MENU {
  43. 	width: 170px;
  44. 	float: left;
  45. 	margin-left: 15px;
  46. 	overflow: hidden;
  47. }
  48.  
  49. #TRESC {
  50. 	width: 760px;
  51. 	float: left;
  52. 	overflow: hidden;
  53. 	padding-left: 10px;
  54. }
  55.  
  56. #STOPKA {
  57.         float: left;
  58. 	width: 100%;
  59. }
  60.  
  61. /* Menu: poczatek */
  62.  
  63. dl, dt, dd {
  64. 	display: block;
  65. 	margin: 0;
  66. 	padding: 0;
  67. }
  68.  
  69. dt {
  70. 	width: 128px;
  71. 	padding: 5px 10px;
  72. 	font-weight: bold;
  73. 	font-size: larger;
  74. 	text-align: center;
  75. 	background: #797 url("../img/tlo2.gif") repeat-x top;
  76. 	color: #eff;
  77. 	border-width: 1px;
  78. 	border-style: solid;
  79. 	border-color: #dfe #365 #365 #dfe;
  80. }
  81.  
  82. dd {
  83. 	width: 139px;
  84. 	padding-left: 10px;
  85. 	background: #797 url("../img/strzalka.png") no-repeat left top;
  86. 	border-width: 1px;
  87. 	border-style: solid;
  88. 	border-color: #dfe #365 #365 #dfe;
  89. 	font-size: 13px;
  90. }
  91.  
  92. dl a:link, dl a:visited {
  93. 	display: block;
  94. 	width: 117px;
  95. 	text-decoration: none;
  96. 	padding: 5px 10px;
  97. 	font-weight: bold;
  98. 	background: #bfb url("../img/tlo1.gif") repeat-x top;
  99. 	color: #365;
  100. 	border-left: 1px solid #797;
  101. }
  102.  
  103. dl a:hover {
  104. 	background-color: #797;
  105. 	background-image: url("../img/tlo2.gif");
  106. 	color: #eff;
  107. }
  108.  
  109. /* Menu: koniec */
  110.  
  111.  
  112. #menu{
  113.   overflow: hidden;
  114.   background: #888;
  115.   padding: 0px;
  116.   font: 13px Arial, Verdana, Tahoma;
  117.   width: 962px;
  118.   margin-left: auto;
  119.   margin-right: auto;
  120. }
  121.  
  122. ul#menu li{
  123.   list-style-type: none;
  124.   float: left;
  125. }
  126.  
  127. ul#menu li a{
  128.   display: block;
  129.   padding: 8px;
  130.   color: #fff;
  131.   text-decoration: none;
  132. }
  133.  
  134. ul#menu li li a{
  135.   width: 160px;
  136.   padding: 5px 0px;
  137. }
  138.  
  139. ul#menu li li:hover{
  140.   background: #999;
  141. }
  142.  
  143. ul#menu li ul{
  144.   overflow: hidden;
  145.   display:none;
  146. }
  147.  
  148. ul#menu li:hover ul{
  149.   position: absolute;
  150.   background: #aaa;
  151.   padding:0;
  152.   border:1px solid #999;
  153.   display: block;
  154.   width: 160px;
  155. }
[CSS] pobierz, plaintext


DZIAŁA ?
m4tx
3.06.2010, 14:27:23
NIE, NIE DZIAŁA.

Ale ja też może zaprezentuję to teraz nieco inaczej.

Mój kod:
1. Część dobra:
KLIK
2. Część zła:
KLIK



Twój kod:
3. Część dobra:
KLIK
4. Część zła:
KLIK


Tobie może działa, bo masz pewnie inną przeglądarkę... Moja to Firefox 3.6. Tyle, że mi chodzi o to, żeby to na wszystkich działało smile.gif
Damonsson
3.06.2010, 17:14:14 
[HTML] pobierz, plaintext 
  1. .tekst {
  2. 	text-align: justify;
  3. }
  4.  
  5. .gora {
  6. 	border: none;
  7. 	margin-left: 10px;
  8. }
  9.  
  10. .stopka {
  11. 	text-align: center;
  12. }
  13.  
  14. h1 {
  15. 	margin-top: 0px;
  16. }
  17.  
  18. html, body {
  19. 	margin:0;
  20. 	padding:0;
  21. 	height:100%; 
  22. 	background-image: url(../img/background.gif);
  23. 	color: #000;
  24. }
  25.  
  26. #top {
  27. 	position:relative; 
  28. 	margin:0 auto; 
  29. 	width: 980px;
  30. 	background-image: url(../img/tlotop.png);
  31. 	background-repeat: repeat-y;
  32.  
  33. 	height:auto !important; 
  34. 	height:100%; 
  35.  
  36. 	min-height:100%; 
  37. }
  38.  
  39.  
  40.  
  41. #NAGLOWEK {
  42. 	text-align: center;
  43. }
  44.  
  45. #MENU {
  46. 	padding:1em 15px 15em;
  47. 	width: 170px;
  48. 	float:left;
  49. /*
  50. 	overflow: hidden;
  51. */
  52. }
  53.  
  54.  
  55. #TRESC {
  56. 	padding:1em 10px 15em; 
  57. 	width: 760px;
  58. }
  59.  
  60.  
  61.  
  62. #STOPKA {
  63.   	clear:both;
  64. 	position:absolute;
  65. 	width:100%;
  66. 	bottom:0; 
  67. }
  68.  
  69. /* Menu: poczatek */
  70.  
  71. dl, dt, dd {
  72. 	display: block;
  73. 	margin: 0;
  74. 	padding: 0;
  75. }
  76.  
  77. dt {
  78. 	width: 128px;
  79. 	padding: 5px 10px;
  80. 	font-weight: bold;
  81. 	font-size: larger;
  82. 	text-align: center;
  83. 	background: #797 url("../img/tlo2.gif") repeat-x top;
  84. 	color: #eff;
  85. 	border-width: 1px;
  86. 	border-style: solid;
  87. 	border-color: #dfe #365 #365 #dfe;
  88. }
  89.  
  90. dd {
  91. 	width: 139px;
  92. 	padding-left: 10px;
  93. 	background: #797 url("../img/strzalka.png") no-repeat left top;
  94. 	border-width: 1px;
  95. 	border-style: solid;
  96. 	border-color: #dfe #365 #365 #dfe;
  97. 	font-size: 13px;
  98. }
  99.  
  100. dl a:link, dl a:visited {
  101. 	display: block;
  102. 	width: 117px;
  103. 	text-decoration: none;
  104. 	padding: 5px 10px;
  105. 	font-weight: bold;
  106. 	background: #bfb url("../img/tlo1.gif") repeat-x top;
  107. 	color: #365;
  108. 	border-left: 1px solid #797;
  109. }
  110.  
  111. dl a:hover {
  112. 	background-color: #797;
  113. 	background-image: url("../img/tlo2.gif");
  114. 	color: #eff;
  115. }
  116.  
  117. /* Menu: koniec */
  118.  
  119.  
  120. #menu{
  121.   overflow: hidden;
  122.   background: #888;
  123.   padding: 0px;
  124.   font: 13px Arial, Verdana, Tahoma;
  125.   width: 962px;
  126.   margin-left: auto;
  127.   margin-right: auto;
  128. }
  129.  
  130. ul#menu li{
  131.   list-style-type: none;
  132.   float: left;
  133. }
  134.  
  135. ul#menu li a{
  136.   display: block;
  137.   padding: 8px;
  138.   color: #fff;
  139.   text-decoration: none;
  140. }
  141.  
  142. ul#menu li li a{
  143.   width: 160px;
  144.   padding: 5px 0px;
  145. }
  146.  
  147. ul#menu li li:hover{
  148.   background: #999;
  149. }
  150.  
  151. ul#menu li ul{
  152.   overflow: hidden;
  153.   display:none;
  154. }
  155.  
  156. ul#menu li:hover ul{
  157.   position: absolute;
  158.   background: #aaa;
  159.   padding:0;
  160.   border:1px solid #999;
  161.   display: block;
  162.   width: 160px;
  163. }
[HTML] pobierz, plaintext


Pokombinuj tam jedynie z marginesami i paddingami bo już mi się nie chciało Ci tam dokładnie ustawiać tak jakbyś chciał.

Działa nawet na IE6 smile.gif

EDIT: Nudziło mi się to paddingi jako tako Ci poustawiałem tak jak miałeś chyba smile.gif
230005
3.06.2010, 17:34:55
Kod stąd: http://fortysevenmedia.com/blog/archives/m...y_put_with_css/ jest niezawodny, choć co prawda dla nieco innego przypadku.
m4tx
4.06.2010, 07:21:25
Dzięki wielkie, Damonsson! Twój kod działa dokładnie tak, jak chciałem! Te paddingi trochę źle poustawiałeś, ale to już sobie poprawiłem. Jeszcze raz wielkie dzięki, nie tylko Tobie, ale wszystkim osobom biorącym udział w tym temacie.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.