Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS] Jak rozciągnąć div'a zawsze do końca strony niezależnie od ilości tekstu?
1q2w3e4r
post
Post #1





Grupa: Zarejestrowani
Postów: 238
Pomógł: 0
Dołączył: 6.05.2011

Ostrzeżenie: (10%)
X----

Witam,

Jak rozciągnąć div'a do końca strony niezależnie od ilości tekstu?
Poniżej załączam screena przedstawiającego problem:
(IMG:http://iv.pl/images/05011186814594654477.png)
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 11)
bzeebzee
post
Post #2





Grupa: Zarejestrowani
Postów: 38
Pomógł: 3
Dołączył: 25.12.2011

Ostrzeżenie: (0%)
-----

w css daj dla elementu min-height: 100%
Go to the top of the page
+Quote Post
1q2w3e4r
post
Post #3





Grupa: Zarejestrowani
Postów: 238
Pomógł: 0
Dołączył: 6.05.2011

Ostrzeżenie: (10%)
X----

Niestety bez zmian.
Macie jakieś inne pomysły?
Go to the top of the page
+Quote Post
jackraymund
post
Post #4





Grupa: Zarejestrowani
Postów: 217
Pomógł: 21
Dołączył: 10.06.2011
Skąd: Głogów

Ostrzeżenie: (0%)
-----

daj cały kod tego diva
Go to the top of the page
+Quote Post
JustHuman4
post
Post #5





Grupa: Zarejestrowani
Postów: 63
Pomógł: 2
Dołączył: 10.12.2011
Skąd: Stumilowy Las

Ostrzeżenie: (0%)
-----

height:100% musi działać i tyle
Go to the top of the page
+Quote Post
1q2w3e4r
post
Post #6





Grupa: Zarejestrowani
Postów: 238
Pomógł: 0
Dołączył: 6.05.2011

Ostrzeżenie: (10%)
X----

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.
Go to the top of the page
+Quote Post
crocodillo
post
Post #7





Grupa: Zarejestrowani
Postów: 215
Pomógł: 44
Dołączył: 31.07.2011
Skąd: wrocław

Ostrzeżenie: (0%)
-----

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ś.
Go to the top of the page
+Quote Post
maviozo
post
Post #8





Grupa: Zarejestrowani
Postów: 197
Pomógł: 24
Dołączył: 22.11.2010

Ostrzeżenie: (0%)
-----

Masz <!DOCTYPE html>?
Go to the top of the page
+Quote Post
1q2w3e4r
post
Post #9





Grupa: Zarejestrowani
Postów: 238
Pomógł: 0
Dołączył: 6.05.2011

Ostrzeżenie: (10%)
X----

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
Go to the top of the page
+Quote Post
Bureau
post
Post #10





Grupa: Zarejestrowani
Postów: 26
Pomógł: 0
Dołączył: 18.03.2012

Ostrzeżenie: (0%)
-----

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 ?
Go to the top of the page
+Quote Post
by_ikar
post
Post #11





Grupa: Zarejestrowani
Postów: 1 798
Pomógł: 307
Dołączył: 13.05.2009
Skąd: Gubin/Wrocław

Ostrzeżenie: (0%)
-----

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%

Ten post edytował by_ikar 20.03.2012, 09:55:14
Go to the top of the page
+Quote Post
1q2w3e4r
post
Post #12





Grupa: Zarejestrowani
Postów: 238
Pomógł: 0
Dołączył: 6.05.2011

Ostrzeżenie: (10%)
X----

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).
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 24.08.2025 - 07:54
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn