Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Strona z ramką
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
em1X
2.07.2007, 21:28:09
Czy potrafi ktoś sprawić, aby taki układ dostosowywał się do wysokości strony? Nadawanie height: 100% dla kontenera nic nie daje sad.gif a ja z css nie jestem zbyt mocny...

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2.  
  3. <html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
  6. <title>title</title>
  7. </head>
  8. <style type="text/css">
  9. #container {
  10. 	border: 1px solid blue;
  11. 	height: 500px;
  12. }
  13.  
  14. #frame {
  15. 	float: left;
  16. 	width: 200px;
  17. 	height: 100%;
  18. 	overflow: auto;
  19.  
  20. 	border: 1px solid #000;
  21. }
  22.  
  23. #txt {
  24. 	float: left;
  25. 	width: 500px;
  26. 	margin-left: 10px;
  27. 	padding: 10px;
  28.  
  29. 	border: 1px solid #993300;
  30. }
  31. </style>
  32. <body>
  33.  
  34. <div id="container">
  35. <div id="frame">
  36. <ul>
  37. <li>Element</li>
  38. <li>Element</li>
  39.  
  40. <li>Element</li>
  41. <li>Element</li>
  42. <li>Element</li>
  43. <li>Element</li>
  44. <li>Element</li>
  45. <li>Element</li>
  46. <li>Element</li>
  47. <li>Element</li>
  48. <li>Element</li>
  49.  
  50. <li>Element</li>
  51. <li>Element</li>
  52. <li>Element</li>
  53. <li>Element</li>
  54. <li>Element</li>
  55. <li>Element</li>
  56. <li>Element</li>
  57. <li>Element</li>
  58. <li>Element</li>
  59.  
  60. <li>Element</li>
  61. <li>Element</li>
  62. <li>Element</li>
  63. <li>Element</li>
  64. <li>Element</li>
  65. <li>Element</li>
  66. <li>Element</li>
  67. <li>Element</li>
  68. <li>Element</li>
  69.  
  70. <li>Element</li>
  71. <li>Element</li>
  72. <li>Element</li>
  73. <li>Element</li>
  74. <li>Element</li>
  75. <li>Element</li>
  76. <li>Element</li>
  77. <li>Element</li>
  78. <li>Element</li>
  79.  
  80. <li>Element</li>
  81. <li>Element</li>
  82. <li>Element</li>
  83. <li>Element</li>
  84. <li>Element</li>
  85. <li>Element</li>
  86. <li>Element</li>
  87. <li>Element</li>
  88. <li>Element</li>
  89.  
  90. <li>Element</li>
  91. <li>Element</li>
  92. </ul>
  93. </div>
  94.  
  95. <div id="txt">
  96. <p>asjdhasjkdkasdkashdjaskdhasjkdhasd</p>
  97. </div>
  98.  
  99. </div>
  100.  
  101. </body>
  102. </html>
[HTML] pobierz, plaintext
Zajec
3.07.2007, 10:49:30
Do znudzenia: floatowane elementy nie wpływają na wysokość rodzica. Aby wpływały można rodzicowi przypisać overflow na auto. Oczywiście nie można wtedy przypisywać stałej wysokości rodzicowi.
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.