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
by_ikar
post
Post #2





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

Posty w temacie
- 1q2w3e4r   [CSS] Jak rozciągnąć div'a zawsze do końca strony niezależnie od ilości tekstu?   18.03.2012, 21:27:10
- - bzeebzee   w css daj dla elementu min-height: 100%   19.03.2012, 13:09:21
- - 1q2w3e4r   Niestety bez zmian. Macie jakieś inne pomysły?   19.03.2012, 16:50:46
- - jackraymund   daj cały kod tego diva   19.03.2012, 17:21:55
- - JustHuman4   height:100% musi działać i tyle   19.03.2012, 17:35:18
- - 1q2w3e4r   Udało mi się ustawić to tak: Cytat#content { widt...   19.03.2012, 17:35:41
- - crocodillo   Napisz dokładniej o co chodzi. Czy masz tylko tego...   19.03.2012, 19:57:44
- - maviozo   Masz <!DOCTYPE html>?   19.03.2012, 21:20:41
- - 1q2w3e4r   Gdybym miał dać to co robię musiałbym wklejać cały...   19.03.2012, 22:24:19
- - Bureau   Cytat(maviozo @ 19.03.2012, 21:20:41 ...   19.03.2012, 22:24:43
- - by_ikar   Po pierwsze, nadałeś kontenerowi, o identyfikatorz...   20.03.2012, 09:11:05
- - 1q2w3e4r   Dziękuję za zainteresowanie. W header zostało min-...   20.03.2012, 18:09:29

« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

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

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

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