Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Automatycznie dopasowana wysokość diva
Forum PHP.pl > Forum > Przedszkole
arzach
Witam mam taki szablon
http://www.fusions.cba.pl/kierowcy/index.php
I moje pytanie jak zrobić by lewa kolumna id nav jej wysokość była automatycznie dopasowana do wysokości div id content

Kod
  1. <div id="container">
  2. <div id="banner">
  3. <h1>
  4. Site name
  5. </h1>
  6. </div>
  7. <div id="nav">
  8. <p>
  9. Lorem ipsum..
  10. </p>
  11. </div>
  12. <div id="content">
  13. <h2>
  14. Page heading
  15. </h2>
  16. <p>
  17. test test test test test test test test test test test test test test test test
  18. test test test test test test test test test test test test test test test test
  19. test test test test test test test test test test test test test test test test
  20. test test test test test test test test test test test test test test test test
  21. test test test test test test test test test test test test test test test test
  22. test test test test test test test test test test test test test test test test
  23. test test test test test test test test test test test test test test test test
  24. test test test test test test test test test test test test test test test test
  25. test test test test test test test test test test test test test test test test
  26. </p>
  27. </div>
  28. <div id="footer">
  29. Footer stuff here
  30. </div>
  31. </div>


  1. body
  2. {
  3. margin: 0;
  4. padding: 0;
  5. color: #000;
  6. background-color: #ddd;
  7. }
  8.  
  9. #container
  10. {
  11. margin: 1em 5%;
  12. background-color: #CCCCFF;
  13. border: 1px solid #333;
  14. }
  15. #banner
  16. {
  17. background-color: #666;
  18. border-bottom: 1px solid #333;
  19. }
  20. #banner h1
  21. {
  22. margin: 0;
  23. padding: .5em;
  24. }
  25. #nav
  26. {
  27. float: left;
  28. width: 190px;
  29. background-color: #FFFFCC;
  30. border-right: 1px solid #333;
  31. height: auto;
  32. }
  33. #nav p
  34. {
  35. margin-top: 0;
  36. }
  37. #content
  38. {
  39. padding-top: 1em;
  40. margin: 0 2em 0 200px;
  41. }
  42. #footer
  43. {
  44. clear: both;
  45. background-color: #666;
  46. padding: 1em;
  47. text-align: right;
  48. border-top: 1px solid #333;
  49. }
Maxik
Szukaj pod hasłem "faux column".
Skie
CSS niestety w kilku kwestiach - m.in. to czego szukasz - jest bezradny.

Można natomiast przy jego użyciu obejść tę ułomność poprzez sztuczkę z grafiką tła - tak jak tutaj np: http://www.alistapart.com/articles/fauxcolumns/

Takie coś jednak nie zawsze zdaje egzamin - wtedy warto użyć JavaScript.
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.