Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] problem z height
Forum PHP.pl > Forum > Przedszkole
kamilo818
Może ktoś podpowie.

Nie mogę sobie poradzić z wysokością diva.
Mam ustawionego diva na 90% wysokości okna. W nim ma być kolejny div w którym jest tekst. Jak tekstu jest więcej to ma się przewijać ale nie powiększać diva. Wszytko niby ustawion ok ale nie działa. Nawet jak wrzuca mniej tekstu to przy zmianie wielkosci okna dzieje się to samo.

Możecie podejrzeć to na stronie: www.page4u.waw.pl/galeria
Chodzi o zakładkę 'reduta'
tomi1985
  1. scroll:overflow;


i pokazuj kod bo tak to wiesz... sciana.gif
djgarsi
Cytat(tomi1985 @ 2.09.2014, 17:11:30 ) *
  1. scroll:overflow;


i pokazuj kod bo tak to wiesz... sciana.gif


Hehe. Odwrotnie smile.gif

Kod
overflow: scroll;
tomi1985
heheh w sumie racja biggrin.gif
kamilo818
Oślepłem nie widze co tu nie gra.
index
  1. <div class="slide" id="reduta">
  2. <div class="fake_menu"></div>
  3. <div class="content">
  4.  
  5. <div class="container">
  6. <div class="opis">
  7. <div class="txt">
  8. jh adhj hjdljah ladh da hj kadhj ladkjha djh adhj hjdljah ladh da hj kadhj ladkjha djh adhj hjdljah ladh da hj
  9. </div>
  10. </div>
  11. <div class="galeria">
  12. <div class="galeria_main cycle-slideshow"
  13. data-cycle-fx="fade"
  14. data-cycle-timeout=0
  15. data-cycle-prev="#prev"
  16. data-cycle-next="#next"
  17. data-cycle-center-horz=true
  18. data-cycle-center-vert=true
  19.  
  20. >
  21. <img src="img/promenada.jpg"/>
  22. <img src="img/reduta.jpg"/>
  23. <img src="img/manufaktura.jpg"/>
  24. <img src="img/glodzka.jpg"/>
  25. <img src="img/arkadia.jpg"/>
  26. </div>
  27. <div id="prev"></div>
  28. <div id="next"></div>
  29. </div>
  30. <div class="mapa">
  31. <iframe src="" frameborder="0" style="border:0"></iframe>
  32. </div>
  33. </div>
  34. <div class="navigation">
  35. <div style="width:300px; height:20px; padding:0; margin:auto; display:table;">
  36. <div id="opis"> Opis </div>
  37. <div id="galeria"> Galeria </div>
  38. <div id="mapa"> Mapa </div>
  39. </div>
  40. </div>
  41. </div>
  42. <div class="fake_right"></div>
  43. </div>

css
  1. html{
  2. margin:0;
  3. padding:0;
  4. width:100%;
  5. height:100%;
  6. }
  7.  
  8. body{
  9. margin:0;
  10. padding:0;
  11. width:100%;
  12. height:100%;
  13. overflow:scroll; //docelowo hidden
  14. font-family:Arial;
  15. }
  16. div.slide{
  17. width: 100%;
  18. height: 100%;
  19. overflow: hidden;
  20. background-position: top center;
  21. background-repeat: no-repeat;
  22. background-size: cover;
  23. position: relative;
  24. display:table;
  25. }
  26. div#reduta{
  27. background-image:url('img/reduta.jpg');
  28. }
  29. div.fake_menu {
  30. width:250px;
  31. }
  32. div.fake_right{
  33. width:5%;
  34. }
  35. div.fake_menu, div.content, div.fake_right{
  36. display:table-cell;
  37. position:relative;
  38. height:100%;
  39. border:0px solid;
  40. vertical-align:top;
  41. }
  42. div.container{
  43. width:100%;
  44. border:0px solid white;
  45. height:90%;
  46. overflow:hidden;
  47. position:relative;
  48.  
  49. }
  50. div.navigation{
  51. width:100%;
  52. border:0px solid;
  53. height:10%;
  54. text-align:center;
  55. background-color:#4E8FFF;
  56. opacity:0.9;
  57.  
  58.  
  59.  
  60. }
  61. div.navigation div{
  62. color:#ffffff;
  63. text-decoration: none;
  64. font-size:20px;
  65.  
  66. display:table-cell;
  67. cursor:pointer;
  68.  
  69.  
  70.  
  71. }
  72. div.opis{
  73. background: rgba(78, 143, 255, 0.9);
  74.  
  75.  
  76. border:1px solid #ffffff;
  77. width:99%;
  78. max-height:99%;
  79. overflow-x:hidden;
  80. margin:auto;
  81.  
  82. }
  83. div.txt{
  84. color:#ffffff;
  85. font-size:17px;
  86. padding:40px;
  87. text-align:justify;
  88.  
  89. }
  90. #reduta .galeria, #reduta .mapa{
  91. display:none;
  92. }
  93. .galeria img{
  94. max-width:100%;
  95. max-height:100%;
  96.  
  97. }
  98. div.navigation a.cycle-pager-active{
  99. font-size:30px;
  100.  
  101. }
  102. #reduta div.mapa{
  103. width:100%;
  104. height:100%;
  105. }
  106. #reduta div.galeria{
  107. width:100%;
  108. height:100%;
  109. }
  110. div.galeria_main{
  111. position:relative;
  112.  
  113. }
  114. div#prev, div#next{
  115. position:absolute;
  116. top:0;
  117. background-color:#ffffff;
  118. width:20%;
  119. z-index:99999;
  120. height:100%;
  121. opacity:0;
  122.  
  123. }
  124. div#next{
  125. right:0;
  126. background: url('next.png') no-repeat scroll 50% 50% transparent;
  127. background-size: 80px 80px;
  128.  
  129. }
  130. div#prev{
  131. left:0;
  132. background: url('prev.png') no-repeat scroll 50% 50% transparent;
  133. background-size: 80px 80px;
  134. }
  135. div#prev:hover, div#next:hover{
  136. opacity:0.7;
  137. cursor:pointer;
  138. }
trueblue
Zmień display:table i display:table-cell na domyślny (usuń).
Potem dostosuj layout, tak aby układ był taki jak teraz.
"Block" będzie trzymać wysokość.
tzm
i jesli scroll jest opcjonalny, tz nie zawsze wystepuje to zamiast overflow:scroll zrob overflow:auto

kamilo818
Cytat(tzm @ 2.09.2014, 20:04:12 ) *
i jesli scroll jest opcjonalny, tz nie zawsze wystepuje to zamiast overflow:scroll zrob overflow:auto

ma być niewidoczny zawsze
Turson
Jak ma być niewidoczny to overflow: hidden jak to podpowiedziano wcześniej
kamilo818
Nie daje rady tego pozmieniać.
jak zmieniam na block to rozjeżdza sie wszystko i nie jestem w stanie ustawić divów obok siebie.
lewy div 250px szerokosci prawy 5% szerkosci a srodkowy ma wypełnić reszte strony. Przy table-cell to bez problemu ale bez tego nie wiem jak to ustawić.

edit:
Problem rozwiązany.
Zamiast dodawać fake_div użyłem margin lefti right, zmieniłem z dispaly na domyślne i działa.
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.