Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Jak rozciągnąć div'a zawsze do końca strony niezależnie od ilości tekstu?
Forum PHP.pl > Forum > Przedszkole
1q2w3e4r
18.03.2012, 21:27:10
Witam,

Jak rozciągnąć div'a do końca strony niezależnie od ilości tekstu?
Poniżej załączam screena przedstawiającego problem:
bzeebzee
19.03.2012, 13:09:21
w css daj dla elementu min-height: 100%
1q2w3e4r
19.03.2012, 16:50:46
Niestety bez zmian.
Macie jakieś inne pomysły?
jackraymund
19.03.2012, 17:21:55
daj cały kod tego diva
JustHuman4
19.03.2012, 17:35:18
height:100% musi działać i tyle
1q2w3e4r
19.03.2012, 17:35:41
Udało mi się ustawić to tak:
Cytat
#content {
width: 1005px;
background: url(images/projekt3_20.jpg) repeat-y;
float:left;
min-height: auto;
position: absolute;
bottom: 0;
top: 455px;
}

Jednak w IE tego diva wyrzuca mi w prawo.
W Firefox, Operze i Chrome działa prawidłowo.
crocodillo
19.03.2012, 19:57:44
Napisz dokładniej o co chodzi. Czy masz tylko tego jednego diva na stronie, czy coś jeszcze. Po ustawieniu position:absolute sprawdź jak się zachowuje strona przy zmniejszaniu okna przeglądarki, bo może to nie być to, czego oczekiwałeś.
maviozo
19.03.2012, 21:20:41
Masz <!DOCTYPE html>?
1q2w3e4r
19.03.2012, 22:24:19
Gdybym miał dać to co robię musiałbym wklejać cały szablon. Dlatego szybko na potrzeby problemu zrobiłem stronę. Przedstawia ona problem, który przeszedłem ustawiając:

[HTML] pobierz, plaintext 
  1. #content {
  2. 	width: 1005px;
  3. 	background: #ffffff;
  4. 	float:left;
  5. 	min-height: auto;
  6.  	position: absolute;
  7.  	bottom: 0;
  8. 	top: 222px;
  9. }
[HTML] pobierz, plaintext


Jednak tak jak kolega wyżej powiedział, zmieniając okno przegladarki ten sposób się sypie. Bo ustawiłem position: absolute.

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
  3. <head>
  4.   <title>Test</title>
  5. 	<style>
  6. body {
  7. 	text-align: center;
  8. }
  9. #all {
  10. 	width: 1005px;
  11. 	margin: auto;
  12. }
  13. #header {
  14. 	width: 1005px;
  15. 	height: 222px;
  16. 	background: #808080;
  17. 	float:left;
  18. 	min-height: auto;
  19. }
  20. #content {
  21. 	width: 1005px;
  22. 	background: #ffffff;
  23. 	float:left;
  24. 	min-height: auto;
  25. }
  26. #content_left {
  27. 	width: 194px;
  28. 	float:left;
  29. }
  30. #content_right {
  31. 	width: 811px;
  32. 	float:left;
  33. }
  34. 	</style>
  35. </head>
  36. <body style="background-color: #f1f1f1;">
  37. 	<div id="all">
  38. 		<div id="header"></div>
  39. 		<div id="content">
  40.  
  41. 			<div id="content_left">fdgjhrytjdsf<br />fdgjhrytjdsf<br />fdgjhrytjdsf<br />fdgjhrytjdsf<br />fdgjhrytjdsf<br />fdgjhrytjdsf<br />fdgjhrytjdsf<br />fdgjhrytjdsf<br />fdgjhrytjdsf<br />fdgjhrytjdsf<br />fdgjhrytjdsf<br />fdgjhrytjdsf<br />fdgjhrytjdsf<br />fdgjhrytjdsf<br />fdgjhrytjdsf<br />fdgjhrytjdsf<br /></div>
  42.  
  43. 			<div id="content_right">tyutryutrutrfdgjhrytjdsf<br />fdgjhrytjdsf<br />fdgjhrytjdsf<br />fdgjhrytjdsf<br />fdgjhrytjdsf<br />fdgjhrytjdsf<br />fdgjhrytjdsf<br />fdgjhrytjdsf<br />fdgjhrytjdsf<br />fdgjhrytjdsf<br />fdgjhrytjdsf<br />fdgjhrytjdsf<br />fdgjhrytjdsf<br /></div>
  44.  
  45. 		</div>
  46. 	</div>
  47. </body>
  48. </html>
[HTML] pobierz, plaintext
Bureau
19.03.2012, 22:24:43
Cytat(maviozo @ 19.03.2012, 21:20:41 ) *
Masz <!DOCTYPE html>?


?

Czyżby pod tym nagłówkiem IE tez sobie radził z css jak i inne przegladarki ?
by_ikar
20.03.2012, 09:11:05
Po pierwsze, nadałeś kontenerowi, o identyfikatorze #all margin: auto. Czyli automatyczny margines z każdej strony. Przez co pozostałe kontenery nie będą mogły się rozciągnąć jeżeli podasz im jakąś automatyczną wartość lub wartość procentową. Druga sprawa, nie ma czegoś takiego jak min-height: auto. Jak już używasz css, to używaj go, a nie nadajesz body kolor w sposób lokalny. Po trzecie, w jakim celu nadałeś min-height w header, nadając mu wcześniej stałą wielkość? Dodatkowo, po co header i content ma wartość float? Ostatnia kwestia, jak widzisz że jakieś dane się powtarzają, w tym wypadku szerokość 1005px, to stwórz jakąś klasę, nadaj jej tą szerokość i konkretnym elementom dawaj odpowiednie klasy, zamiast kilka razy dublować te same wartości. Raz że to jest niepotrzebne, a dwa że jest to błąd.

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="content-type" content="text/html; charset=utf-8">
  5.     <title>test</title>
  6.     <style>
  7.         html,body { text-align: center; background: #f1f1f1; margin: 0; padding: 0; height: 100%; }
  8.         #wrapper { width: 1005px; background: #fff; margin: 0 auto; position: relative; min-height: 100%; }
  9.         .header { height: 222px; background: #808080; }
  10.         .content { }
  11.         .content p.left { width: 194px; float:left; }
  12.         .content p.right { width: 811px; float:left; }
  13.         .clear { clear: both; width: 100%; }
  14.     </style>
  15. </head>
  16. <body>
  17. <div id="wrapper">
  18.     <div class="header clear"></div>
  19.     <div class="content clear">
  20.         <p class="left">
  21.             fdgjhrytjdsf <br> fdgjhrytjdsf <br> fdgjhrytjdsf <br> fdgjhrytjdsf <br> fdgjhrytjdsf <br>
  22.             fdgjhrytjdsf <br> fdgjhrytjdsf<br> fdgjhrytjdsf <br> fdgjhrytjdsf <br> fdgjhrytjdsf <br> 
  23.             fdgjhrytjdsf <br> fdgjhrytjdsf<br> fdgjhrytjdsf <br> fdgjhrytjdsf <br> fdgjhrytjdsf <br> 
  24.         </p>
  25.         <p class="right">
  26.             fdgjhrytjdsf <br> fdgjhrytjdsf <br> fdgjhrytjdsf <br> fdgjhrytjdsf <br> fdgjhrytjdsf <br>
  27.             fdgjhrytjdsf <br> fdgjhrytjdsf<br> fdgjhrytjdsf <br> fdgjhrytjdsf <br> fdgjhrytjdsf <br> 
  28.             fdgjhrytjdsf <br> fdgjhrytjdsf<br> fdgjhrytjdsf <br> fdgjhrytjdsf <br> fdgjhrytjdsf <br> 
  29.         </p>
  30.         <div class="clear"></div>
  31.     </div>
  32. </div>
  33. </body>
  34. </html>
[HTML] pobierz, plaintext


Podsumowując: aby w tym przypadku wrapper, mógł się rozciągnąć na 100% dostępnej wysokości, musi być pozycjonowany relatywnie, czyli jakby trzeba nadać mu pewną "ważność". Dopiero wówczas wtedy min-height: 100% zadziała.

Hint: css height 100%
1q2w3e4r
20.03.2012, 18:09:29
Dziękuję za zainteresowanie.
W header zostało min-height bo kopiowałem z content nasz szybko, dobra - mało ważne w tym momencie.

Ja nie chciałem aby to białe pole rozciągać od samej góry - tylko od header'a dlatego go utworzyłem. Ponieważ we właściwym szablonie mam przezroczysty nagłówek (png).
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.